/*hero*/
.hero {
    position: relative;
    height: 815px;
    background-image: url('../assets/img/technologies/bg-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56.05%, #000000 95.97%);
    z-index: 0;
}

.hero .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero h1 {
    max-width: 1125px;
    width: 100%;
    font-family: 'Play', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}
/*endsection*/

/*technology*/
.technology {
    margin-bottom: 150px;
}

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

.technology .video-block {
    max-width: 605px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.technology .video-block video {
    display: flex;
    width: 100%;
}

.technology .text-block {
    max-width: 565px;
    width: 100%;
}

.technology .text-block h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.technology .text-block p {
    font-weight: 300;
    font-size: 16px;
    line-height: 160%;
    color: #ACAFB9;
}
/*endsection*/

/*laser-human*/
.laser-human {
    margin-bottom: 150px;
}

.laser-human .text {
    max-width: 837px;
    width: 100%;
    margin-bottom: 50px;
}

.laser-human .text h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 20px;
}

.laser-human .text p {
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
    color: #ACAFB9;
}

.laser-human .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.laser-human .top .text-block,
.laser-human .top .illustration {
    max-width: 605px;
    width: 100%;
}

.laser-human .top .illustration {
    display: flex;
    flex-direction: column;
}

.laser-human .top .illustration img {
    display: flex;
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
}

.laser-human .item {
    font-weight: 300;
    font-size: 16px;
    line-height: 140%;
    color: #ACAFB9;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 20px;
}

.laser-human .item:last-child {
    margin-bottom: 0;
}
/*endsection*/

/*table*/
.section-table {
    margin-bottom: 150px;
}

.section-table .table {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(172, 175, 185, 0.1);
    border-radius: 20px;
}

.section-table .table .column.column-1 {
    width: 216px;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}

.section-table .table .column {
    width: 256px;
}

.section-table .table .column:nth-child(4) {
    border-left: 1px solid rgba(172, 175, 185, 0.1);
    border-right: 1px solid rgba(172, 175, 185, 0.1);
}

.section-table .column.active {
    background: rgba(255, 255, 255, 0.1);
}

.section-table .column .title-row {
    background: rgba(172, 175, 185, 0.05);
    padding: 30px 20px;
}

.section-table .column.active .title-row {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
}

.section-table .column.active .title-row span {
    position: absolute;
    top: -80px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0px 0px;
}

.section-table .column.active .title-row span i {
    display: flex;
    width: 184px;
    height: 32px;
    background: url('../assets/img/technologies/icons/icon-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-table .column .title-row p {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #ACAFB9;
}

.section-table .column .row {
    height: 313px;
    padding: 40px;
}

.section-table .column.column-1 .row {
    display: flex;
    align-items: center;
}

.section-table .column.active .title-row p {
    color: #FFFFFF;
}

.section-table .column.column-1 .row p {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #ACAFB9;
}

.section-table .column .row.row-2 {
    background: rgba(172, 175, 185, 0.05);
}

.section-table .column.active .row.row-2 {
    background: rgba(255, 255, 255, 0.05);
}

.section-table .column .row span {
    position: relative;
    display: flex;
    align-items: flex-start;
    font-weight: 300;
    font-size: 12px;
    line-height: 140%;
    color: #ACAFB9;
    padding-left: 30px;
    margin-bottom: 15px;
}

.section-table .column .row span::before {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    display: flex;
}

.section-table .column .row span.icon-green::before {
    background-image: url('../assets/img/technologies/icons/icon-green.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-table .column .row span.icon-grey::before {
    background-image: url('../assets/img/technologies/icons/icon-grey.png');
    background-repeat: no-repeat;
    background-size: contain;
}
/*endsection*/

/*robotic-force*/
.robotic-force {
    margin-bottom: 100px;
}

.robotic-force h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 100px;
}

.robotic-force .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.robotic-force .video-block,
.robotic-force .text-block {
    max-width: 605px;
    width: 100%;
}

.robotic-force .video-block {
    border-radius: 20px;
    overflow: hidden;
}

.robotic-force .video-block video {
    display: flex;
    width: 100%;
}

.robotic-force .text-block p {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.robotic-force .text-block span {
    display: flex;
    font-weight: 300;
    font-size: 16px;
    line-height: 140%;
    color: #ACAFB9;
    margin-bottom: 30px;
}
/*endsection*/

/*section-sdk*/
.section-sdk {
    margin-bottom: 100px;
}

.section-sdk .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
}

.section-sdk .illustration {
    max-width: 277px;
    width: 100%;
    margin-right: 50px;
}

.section-sdk img {
    width: 100%;
    display: flex;
}

.section-sdk .text-block {
    max-width: 833px;
    width: 100%;
}

.section-sdk .text-block h2 {
    font-weight: 800;
    font-size: 32px;
    line-height: 39px;
    margin-bottom: 30px;
}

.section-sdk .text-block p {
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: #ACAFB9;
}
/*endsection*/

/*section-list*/
.section-list {
    margin-bottom: 150px;
}

.section-list h2 {
    font-weight: 800;
    font-size: 32px;
    line-height: 39px;
    margin-bottom: 30px;
}

.section-list .list {
    display: flex;
    justify-content: space-between;
}

.section-list .list .item {
    max-width: 151px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.section-list .item i {
    display: flex;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.section-list .item i.icon-service {
    background-image: url('../assets/img/technologies/icons/icon-service.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-medical {
    background-image: url('../assets/img/technologies/icons/icon-medical.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-exploration {
    background-image: url('../assets/img/technologies/icons/icon-exploration.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-control {
    background-image: url('../assets/img/technologies/icons/icon-control.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-platform {
    background-image: url('../assets/img/technologies/icons/icon-platform.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-training {
    background-image: url('../assets/img/technologies/icons/icon-training.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item i.icon-research {
    background-image: url('../assets/img/technologies/icons/icon-research.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.section-list .item p {
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    text-align: center;
}
/*endsection*/

/*omnidirectional*/
.omnidirectional {
    margin-bottom: 150px;
}

.omnidirectional h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.omnidirectional .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.omnidirectional .video-block,
.omnidirectional .text-block {
    max-width: 605px;
    width: 100%;
}

.omnidirectional .video-block {
    border-radius: 20px;
    overflow: hidden;
}

.omnidirectional .video-block video {
    display: flex;
    width: 100%;
}

.omnidirectional .text-block p {
    font-weight: 300;
    font-size: 16px;
    line-height: 140%;
    color: #ACAFB9;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
}

.omnidirectional .text-block p:first-child {
    min-height: 311px;
}

.omnidirectional .text-block p:last-child {
    min-height: 227px;
    margin-bottom: 0;
}
/*endsection*/

@media (-webkit-min-device-pixel-ratio: 2) {
    /*hero*/
    .hero {
        background-image: url('../assets/img/technologies/bg-hero-2x.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }
    /*endsection*/
}

@media (max-width: 480px) {
    /*hero*/
    .hero {
        height: 500px;
        background-image: url('../assets/img/technologies/bg-hero-mobile-2x.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }

    .hero h1 {
        font-size: 25px;
        line-height: 130%;
    }
    /*endsection*/

    /*technology*/
    .technology {
        margin-bottom: 100px;
    }

    .technology .container {
        flex-direction: column;
    }

    .technology .video-block {
        margin-bottom: 30px;
    }

    .technology .text-block h2 {
        font-size: 32px;
        line-height: 39px;
    }

    .technology .text-block p {
        font-size: 14px;
        line-height: 150%;
    }
    /*endsection*/

    /*laser-human*/
    .laser-human {
        margin-bottom: 100px;
    }

    .laser-human .text h2 {
        font-size: 32px;
        line-height: 39px;
    }

    .laser-human .text p {
        font-size: 18px;
        line-height: 150%;
    }

    .laser-human .top {
        flex-direction: column-reverse;
    }

    .laser-human .top .illustration {
        margin-bottom: 20px;
    }

    .laser-human .item {
        font-size: 14px;
        padding: 25px;
    }
    /*endsection*/

    /*table*/
    .section-table {
        margin-bottom: 100px;
    }

    .section-table .table {
        flex-direction: column;
    }

    .section-table .table .column {
        display: flex;
        width: 100%;
    }

    .section-table .table .column.column-1 {
        width: 100%;
        height: 150px;
    }

    .section-table .column.column.column-1 .title-row p {
        white-space: normal;
    }

    .section-table .column .title-row {
        width: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .section-table .column.active .title-row p {
        display: none;
    }

    .section-table .column.active .title-row span {
        position: relative;
        height: 20px;
        width: 115px;
        top: unset;
        left: unset;
        background: none;
        border-radius: 0;
    }

    .section-table .column.active .title-row span i {
        transform: rotate(-90deg);
    }

    .section-table .column .title-row p {
        font-size: 14px;
        line-height: 100%;
        white-space: nowrap;
        transform: rotate(-90deg);
    }

    .section-table .column .row {
        width: calc(100% - 50% - 26px);
        height: auto;
        padding: 20px 10px;
    }

    .section-table .column.column-1 .row p {
        font-size: 14px;
        line-height: 100%;
    }

    .section-table .column .row span {
        flex-direction: column;
        padding-left: 0;
    }

    .section-table .column .row span::before {
        position: relative;
        top: unset;
        left: unset;
        width: 12px;
        height: 12px;
        margin-bottom: 5px;
    }
    /*endsection*/

    /*robotic-force*/
    .robotic-force {
        margin-bottom: 50px;
    }

    .robotic-force h2 {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 50px;
    }

    .robotic-force .bottom {
        flex-direction: column;
    }

    .robotic-force .text-block p {
        font-size: 24px;
        line-height: 29px;
    }

    .robotic-force .text-block span {
        font-size: 14px;
        line-height: 24px;
    }
    /*endsection*/

    /*section-sdk*/
    .section-sdk {
        margin-bottom: 50px;
    }

    .section-sdk .card {
        flex-direction: column;
        padding: 25px;
    }

    .section-sdk .illustration {
        margin-right: 0;
        margin-bottom: 50px;
    }

    .section-sdk .text-block h2 {
        font-size: 32px;
        line-height: 39px;
    }

    .section-sdk .text-block p {
        font-size: 16px;
        line-height: 150%;
    }
    /*endsection*/

    /*section-list*/
    .section-list {
        margin-bottom: 100px;
    }

    .section-list h2 {
        font-size: 32px;
        line-height: 39px;
        text-align: center;
    }

    .section-list .list {
        flex-wrap: wrap;
    }

    .section-list .list .item {
        max-width: 100%;
        width: 47%;
        margin-bottom: 20px;
    }

    .section-list .item i {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .section-list .item p {
        font-size: 14px;
        line-height: 120%;
    }

    .section-list .item p br {
        display: none;
    }
    /*endsection*/

    /*omnidirectional*/
    .omnidirectional {
        margin-bottom: 100px;
    }

    .omnidirectional h2 {
        font-size: 32px;
        line-height: 39px;
    }

    .omnidirectional .bottom {
        flex-direction: column;
    }

    .omnidirectional .video-block {
        margin-bottom: 30px;
    }

    .omnidirectional .text-block p:first-child,
    .omnidirectional .text-block p:last-child {
        min-height: unset;
    }

    .omnidirectional .text-block p {
        font-size: 14px;
        line-height: 150%;
        padding: 25px;
    }
    /*endsection*/
}