* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: "Roboto", sans-serif !important; */
    font-family: 'Proba Pro' !important;
}

a {
    text-decoration: none;
}

body {
    background-color: #F5F5F5;

}

.cool-background {
    background-image: url(/assets/img/bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 220px;
}

.container {
    max-width: 1520px;
    margin: auto;
}

nav {
    max-width: 1520px;
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;

    align-items: center;
}

.nav_left,
.nav_right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav_left {
    gap: 120px;
}

.nav_right {
    gap: 48px;
}

.nav_left article,
.nav_right article {
    display: flex;
    gap: 35px;
    align-items: center;
}

.nav_left a,
.nav_right a {
    display: flex;
    align-items: center;
    font-size: 24px;
    /* font-weight: bold; */
    color: rgba(46, 74, 107, 1);
    transition: 0.15s;
}

.nav_left a:hover {
    transition: 0.15s;
    font-weight: bold;
}

.nav_right a {
    font-weight: bold;
}

h1 {
    text-align: center;
    color: rgba(46, 74, 107, 1);
    margin-top: 100px;
    font-size: 80px;
}

.main-description {
    /* font-family: none; */
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: #262626;
    max-width: 1000px;
    margin: auto;
    margin-top: 2rem;
    text-shadow: 0 0 black;
}

.main-fosbtn {
    font-weight: 600;
    font-size: 24px;
    color: #2E4A6B;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 32px;
    max-width: 301px;
    width: 100%;
    height: 71px;
    background: #B6D04B;
    border-radius: 12px;
    border: none;
    margin: 2rem auto;
}

.main-h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    text-align: center;
    color: rgba(77, 77, 77, 1);
    text-align: start;
    margin: 3rem 0;
}

.main-brand {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 6px;

    max-width: 1520px;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.brand-flex {
    /* Frame 6 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;

}

.brand-img {
    /* Frame 5 */

    max-width: 637px;
    width: 100%;

    background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 41.01%), url(image.png);
    border-radius: 16px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;

}

.brand-title {
    /* Frame 33 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;

    max-width: 234px;
    width: 100%;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;


    /* Стриж */
    font-weight: 500;
    font-size: 42px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    text-align: center;

    /* #2E4A6B */
    color: #2E4A6B;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.brand-description {
    /* Frame 32 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 36px 36px 36px 24px;
    gap: 24px;

    max-width: 637px;
    width: 100%;

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 1;

}

.brand-description-text {
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;

    /* #262626 */
    color: #262626;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.brand-description-links {
    /* Frame 16 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.brand-description-links a {
    /* Frame 1 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    gap: 10px;

    max-width: 113px;
    width: 100%;
    height: 71px;

    /* #F5F5F5 */
    background: #F5F5F5;
    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    color: #2E4A6B;
    font-weight: 600;

}

.main-about {
    /* Component 3 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 48px; */
    padding: 32px;
    gap: 12px;
    isolation: isolate;

    border-radius: 20px;
    /* max-width: 490px; */
    width: 100%;

    border: 6px solid #2E4A6B;
    /* border-image: linear-gradient(205.86deg, #B6D04B 50.22%, rgba(255, 255, 255, 0) 50.76%) 1; */


}

.about-title {
    /* 30+ */

    /* width: 394px; */
    /* height: 103px; */

    font-weight: 600;
    font-size: 80px;
    font-size: 42px;
    /* line-height: 103px; */

    /* #2E4A6B */
    color: #2E4A6B;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 0;

}

.about-description {
    /* лет совокупного опыта компаний в своих сегментах */

    max-width: 394px;
    width: 100%;

    /* font-family: 'Proba Pro'; */
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;

    /* #262626 */
    color: #262626;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    z-index: 1;

}

.main-abouts,
.main-whys {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    gap: 24px;
}

.second-screen {
    padding-bottom: 2rem;
}

.main-why {
    /* Component 2 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px;
    gap: 12px;
    isolation: isolate;

    border-radius: 20px;
    border: 6px solid #2E4A6B;

    max-width: 748px;
}

.why-title {
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;

    /* #2E4A6B */
    color: #2E4A6B;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 0;



}

.why-description {
    /* лет совокупного опыта компаний в своих сегментах */


    font-weight: 300;
    font-size: 24px;
    line-height: 30px;

    /* #262626 */
    color: #262626;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    z-index: 1;

}

footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 100px 200px; */
    padding-top: 100px;
    padding-bottom: 100px;
    gap: 48px;
    /* gap: 25px; */

    /* #2E4A6B */
    background: #2E4A6B;

}

.footer-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;

    max-width: 1520px;
    width: 100%;



    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 0 auto;

}

.footer-logo {
    width: 173.53px;
    height: 50px;

}

.footer-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 48px;



}

.footer-nav a {

    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;

    /* #F5F5F5 */
    color: #F5F5F5;

}

.footer-contacts {
    /* Frame 44 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 48px;


}

.footer-contacts a {

    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    /* identical to box height */
    text-align: center;

    /* #B6D04B */
    color: #B6D04B;
}

.footer-description {
    /* Frame 27 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
    gap: 60px;

    max-width: 1520px;
    width: 100%;
    height: 31px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    /* Услуги */

    margin: 0 auto;

    font-weight: 400;
    font-size: 24px;
    line-height: 31px;
    /* identical to box height */

    color: #FFFFFF;

    opacity: 0.5;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    width: fit-content;
    text-align: center;
}

.main-logo {
    /* геолайт 2 */

    max-width: 277.65px;
    width: 100%;
    height: 80px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.header_menu {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 24px;
    color: rgba(46, 74, 107, 1);
    /* font-weight: bold; */
    cursor: pointer;
}






.header_menu {
    position: relative;
    display: inline-block;
}

.menu_title {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.menu_title svg {
    transition: 0.15s;
    /* transform: rotate(180deg) */
}

.menu_title:hover svg {
    transition: 0.15s;
    transform: rotate(180deg)
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    /* padding: 10px; */
    display: none;

    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 10px 20px 0px rgba(77, 77, 77, 0.2);
    gap: 12px;
}

.header_menu:hover .submenu {
    display: flex;
    flex-direction: column;
}

.overlay_lk {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #00000087;

    opacity: 0;
    pointer-events: none;
}

.overlay_lk.active {
    opacity: 1;
    pointer-events: all;
    height: 1200%;
}

.lk_popUp {
    background-color: rgba(245, 245, 245, 1);
    max-width: 748px;
    width: 100%;
    height: 236px;

    position: fixed;
    z-index: 3;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: center;
    border-radius: 10px;
}

.lk_popUp.active {
    opacity: 1;
    pointer-events: all;
}

.lk_popUp a {
    transition: 0.15s;
}

.lk_popUp a:hover {
    transition: 0.15s;
    transform: scale(1.04);
}

.close_btn {
    transition: 0.15s;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.close_btn:hover {
    transition: 0.15s;
    transform: rotate(180deg);

}

.brand-des-mob {
    display: none;
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 12px;
    gap: 3px;
    width: 38px;
    height: 37px;
    padding: 10px;
}

.burger div {
    height: 3px;
    width: 100%;
    background-color: rgba(46, 74, 107, 1);
    border-radius: 2px;
    transition: 0.15s;
}

.burger.active div:nth-child(1) {
    transform: rotate(-45deg);
    position: relative;
    top: 3px;
    transition: 0.15s;
}

.burger.active div:nth-child(2) {
    display: none;
}

.burger.active div:nth-child(3) {
    transform: rotate(45deg);
    position: relative;
    top: -3px;
    transition: 0.15s;
}

.buger_menu {
    opacity: 0;
    z-index: 10;
    display: none;
}

.buger_menu.active {
    background-color: rgba(245, 245, 245, 1);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 52px;
    display: block;
    opacity: 1;
}

.bur_links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.bur_links a {
    font-size: 34px;
    color: rgba(46, 74, 107, 1);
}

.bur_zum {
    display: flex;
    gap: 24px;
    flex-direction: column;
    margin-top: 24px;
    align-items: center;
}

.bur_zum a {
    font-size: 24px;
    color: rgba(182, 208, 75, 1);
    font-weight: 600;
}

.bur_lk {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    gap: 12px;
    align-items: center;
}

body.active {
    overflow: hidden;
}

.company-card {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 32px;
    padding-bottom: 120px;
}

.company-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
    max-width: 1520px;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 20px;
    background: white;
    padding: 48px;
}

.item {
    font-size: 14px;
    line-height: 1.4;
    width: max-content;
}

.label {
    margin-bottom: 6px;
    font-size: 20px;
    color: rgba(38, 38, 38, 1);
}

.value {
    font-weight: 700;
    color: #222;
    font-size: 20px;
}

#lk {
    display: flex;
    gap: 9px;
    transition: 0.15s;
    align-items: center;
}

#lk svg {
    transition: 0.15s;
}

#lk:hover svg {
    transform: scale(1.1);
    transition: 0.15s;
}

footer #lk svg {
    min-width: 32px;
    min-height: 32px;
}

.info h2 div svg {
    transform: rotate(180deg);
}

.h2_click.active svg {
    transform: rotate(0deg) !important;
}


































@media (max-width:1520px) {
    .company-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .brand-flex,
    .brand-description,
    .brand-description-links,
    .brand-description-text,
    .brand-img {
        flex: auto;
    }

    .footer-contacts {
        gap: 25px;
    }

    .footer-nav a {
        line-height: normal;
        white-space: nowrap;
    }
}

@media (max-width:1410px) {

    .nav_left,
    .nav_right {
        gap: 20px;
    }

    .footer-info {
        flex-direction: column;
        gap: 40px;
    }

    footer {
        gap: 25px;
    }


}

@media (max-width:1330px) {
    .brand-description-links {
        flex-direction: column;
    }

    .brand-img {
        object-fit: cover;
    }

    .brand-description-links a {
        max-width: none;
    }

    .brand-description-links {
        width: 100%;
    }

    .brand-des-mob {
        display: block;
    }

    .brand-title {
        display: none;
    }

    .brand-des-mob {
        font-size: 24px;
        color: rgba(46, 74, 107, 1);
    }


}

@media (max-width:1200px) {
    .main-abouts {
        flex-direction: column;
    }

    .about-description {
        max-width: none;
    }


}

@media (max-width:991px) {

    .nav_left article,
    .nav_right article {
        display: none;
    }

    .header_mail {
        display: none !important;
    }

    .brand-description {
        font-size: 32px;
    }

    .main-description {
        font-size: 16px;
    }

    h1 {
        font-size: 32px;
        margin-top: 36px;
    }

    .brand-flex {
        flex-direction: column;
    }

    .brand-description,
    .brand-img {
        max-width: none;
    }

    .brand-img {
        height: 300px;
    }

    .brand-description-links {
        flex-direction: row;
        overflow-y: scroll;
    }

    .brand-description-links a {
        max-width: 228px;
        font-size: 14px;
        padding: 20px;
        height: auto;
    }

    .main-logo{
        max-width: 120px;
        height: auto;
        object-fit: contain;
    }

    .footer-logo {
        width: 100%;
        max-width: 300px;
        height: auto;
    }   

    .nav_right a {
        font-size: 16px;
    }

    nav {
        padding-top: 10px;
        position: fixed;
        background-color: rgba(245, 245, 245, 1);
        top: 0;
        padding-bottom: 10px;
        z-index: 10;
    }

    .burger {
        display: flex;
    }

    .main-description {
        margin-top: 20px;
    }

    .main-h2 {
        font-size: 24px;
        padding-bottom: 16px;
        padding-top: 120px;
        margin: 0;
    }

    .brand-flex {
        width: inherit;
    }

    .brand-description-text {
        font-size: 16px;
    }

    .second-screen h2 {
        padding-top: 40px;
    }

    .about-title {
        font-size: 24px;
    }

    .about-description {
        font-size: 16px;
        line-height: 150%;
    }

    .main-about {
        padding: 24px;
    }

    .footer-nav a {
        width: 100%;
    }

    .company-grid {
        margin: 0;
    }

    .company-grid {
        padding: 16px;
    }

    .label {
        font-size: 18px;
    }

    .value {
        font-size: 16px;
    }


}

@media (max-width:767px) {
    .brand-description-text {
        font-size: 14px;
    }

    .brand-description-links a {
        max-width: 120px;
    }

    .brand-description-links {
        gap: 10px;
    }

    .footer-nav {
        flex-direction: column;
    }

    .footer-contacts {
        flex-direction: column;
    }

    footer {
        padding: 50px 20px;
    }

    .footer-description {
        font-size: 16px;
    }

    .company-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .item {
        width: auto;
    }
}

/* адаптив */
@media (max-width: 1200px) {
    .company-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .company-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width:1550px) {
    .footer-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: start;
    }
}

@media (max-width: 1410px) {
    .footer-nav {
        justify-items: center;
    }
}

@media (max-width: 767px) {
    .footer-nav {
        display: flex;
        flex-direction: column;
    }
}