﻿.main-content {
    background-color: #fff;
}

.shapka {
    position: relative;
    background: #001223 url(/images/aidl-header-bg.webp) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 30vh;
    min-height: 405px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-sintez {
    padding-top: 40px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 100%; 
}

.minimalfab-title .title {
    font: 34px / 40px "Exo 2.0";
    margin-bottom: 60px;
}

.title {
    text-transform: uppercase;
}


/*====================================================
======================================================
AIDL.HTML
======================================================
====================================================*/
/*  ↓   ↓ ↓   ↓ ↓   ↓ ↓   ↓ */
.i-info {
    background: url(/images/icon/info.webp) no-repeat;
}

.icon-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    background: transparent;
    border: solid 2px #414141;
    border-radius: 50px;
}

    .icon-marker::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 4px;
        width: 2px;
        height: 2px;
        background: #fff;
    }

/*====================================================
Header Top
====================================================*/
.aidl-header-bg {
    background: url(/images/aidl-header-bg.webp) no-repeat top center;
    background-size: cover;
    height: 390px;
}

/*====================================================
Header Bottom
====================================================*/
.branch-name {
    width: 320px;
    margin: 0 auto;
    margin-top: 90px;
}

/*====================================================
Aidl Info
====================================================*/
.aidl-info {
    padding-top: 100px;
    color: #414141;
    background: #fff;
}

.preface-top {
    margin-bottom: 90px;
}

    .preface-top .title-block {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .preface-top .preface-img {
        width: 218px;
        margin-right: 55px;
    }

    .preface-top .text {
        font-size: 16px;
        line-height: 32px;
    }

.title-aidl {
    font-size: 42px;
    line-height: 55px;
    letter-spacing: 2px;
}

    .title-aidl b {
        font-weight: normal;
        color: #76C8FF;
    }

.preface-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(/images/content/aidl-content-2.webp) no-repeat;
    background-size: contain;
    width: 100%;
    height: 355px;
    margin-bottom: 100px;
}

    .preface-bottom .title-block {
        width: 490px;
        margin: 35px 60px 0 0;
    }

    .preface-bottom .title {
        font: 27px/27px "Exo 2.0";
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .preface-bottom .text {
        font-size: 14px;
        line-height: 28px;
    }

.aidl-plan {
    padding-bottom: 100px;
}

    .aidl-plan .main-title {
        font-size: 35px;
        line-height: 35px;
        margin-bottom: 70px;
    }

.plan-img-block {
    display: flex;
    align-items: center;
    height: 160px;
    margin-bottom: 30px;
}

    .plan-img-block .plan-img {
        position: relative;
    }

        .plan-img-block .plan-img i {
            background: url(/images/icon/arr.svg) no-repeat;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            right: -120px;
            width: 30px;
            height: 30px;
        }

.plan-block .title {
    font: 16px/20px 'Exo 2.0 Semi';
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 20px;
}

.plan-block .text {
    position: relative;
    font-size: 14px;
    line-height: 24px;
    padding-left: 25px;
    margin-bottom: 10px;
}

.plan-block .icon-marker {
    top: 5px;
    left: 0;
}

/*====================================================
Aidl MinimalFab
====================================================*/
.aidl-minimalfab {
    background: #ffffff url(/images/content-aidl-bg.webp) no-repeat top center;
    color: #414141;
    padding-top: 130px;
}

.minimalfab-title {
    text-align: center;
    margin-bottom: 130px;
}

    .minimalfab-title .title {
        font: 34px/40px "Exo 2.0";
        margin-bottom: 60px;
    }

    .minimalfab-title .text {
        font-size: 30px;
        line-height: 42px;
        letter-spacing: 1px;
        margin-bottom: 60px;
    }

.logo-creators {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

    .logo-creators .logo-1 {
        width: 155px;
    }

    .logo-creators .logo-2 {
        width: 135px;
    }

.minimalfab-info .block-img {
    padding-right: 20px;
}

.minimalfab-info .text-block {
    padding: 0 20px;
}

.minimalfab-info .text {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 30px;
}

.img-info {
    margin-bottom: 15px;
}

    .img-info img {
        border-radius: 10px;
    }

.text-info .title {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #414141;
}

.text-info .text {
    font-size: 14px;
    line-height: 24px;
    color: #414141;
    padding: 0;
}

.text-info .add-text {
    position: relative;
    padding-left: 35px;
}

    .text-info .add-text i {
        position: absolute;
        top: 5px;
        left: 0px;
        width: 19px;
        height: 19px;
    }

.minimalfab-advantages {
    margin-bottom: 125px;
}

    .minimalfab-advantages .title {
        font: 18px/20px 'Exo 2.0 Semi';
        font-weight: 600;
        letter-spacing: .5px;
        margin-bottom: 40px;
        padding-left: 20px;
    }

    .minimalfab-advantages .advantage-block {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 10px;
    }

        .minimalfab-advantages .advantage-block li {
            display: flex;
            align-items: center;
        }

        .minimalfab-advantages .advantage-block .text {
            font-size: 16px;
            line-height: 24px;
            width: 175px;
        }

        .minimalfab-advantages .advantage-block .icon {
            flex-shrink: 0;
            width: 52px;
            margin-right: 20px;
        }

            .minimalfab-advantages .advantage-block .icon img {
                width: auto;
            }

.minimalfab-demo .main-title {
    font-size: 35px;
    line-height: 52px;
    margin-bottom: 30px;
    letter-spacing: .5px;
}

.minimalfab-demo .main-text {
    font-size: 16px;
    line-height: 30px;
    padding-right: 210px;
    margin-bottom: 30px;
}

.demo-content {
    padding-bottom: 100px;
}

.demo-content-top {
    display: flex;
}

.demo-block {
    position: relative;
    background: #0076c1;
    padding: 65px 0 0 65px;
    width: 260px;
    height: 210px;
}

    .demo-block::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        border: 105px solid transparent;
        border-left: 45px solid green;
        z-index: 100;
    }

    .demo-block .title {
        position: absolute;
        top: -45px;
        left: 50%;
        width: 230px;
        margin-left: -115px;
        font-weight: 600;
        color: #fff;
        text-align: center;
        z-index: 110;
    }

    .demo-block .block-img {
        position: absolute;
        bottom: -16px;
        display: flex;
        width: 180px;
        height: 155px;
    }

.demo-1 {
    width: 230px;
    background: #BDE4FF;
    border-radius: 10px 0 0 10px;
    padding-left: 30px;
}

    .demo-1::after {
        border-left-color: #BDE4FF;
    }

.demo-2 {
    background: #A8DCFF;
}

    .demo-2::after {
        border-left-color: #A8DCFF;
    }

.demo-3 {
    background: #8FD2FF;
}

    .demo-3 .block-img {
        height: 145px;
        bottom: -8px;
    }

    .demo-3 .title {
        top: -47px;
    }

    .demo-3::after {
        border-left-color: #8FD2FF;
    }

.demo-4 {
    background: #76C8FF;
}

    .demo-4::after {
        border-left-color: #76C8FF;
    }

.demo-block-img {
    position: relative;
    background: url(/images/content/aidl-content-5.webp) no-repeat;
    background-size: cover;
    flex-grow: 2;
    border-radius: 0 10px 10px 0;
}

    .demo-block-img .title {
        position: absolute;
        top: 26px;
        left: 50%;
        margin-left: -100px;
        font-weight: 600;
        width: 230px;
        text-align: center;
        color: #fff;
    }

.demo-content-bottom {
    display: flex;
    padding-top: 30px;
    padding-right: 230px;
    padding-left: 40px;
}

    .demo-content-bottom .text {
        font-size: 14px;
        line-height: 24px;
        width: 100%;
        padding-right: 40px;
    }