/* 14. About us Page  ------------------------------------------*/

//about us
.about-us {
    padding-top: 90px;
}
.about-us-content {
    .about-us-info {
        p {
            margin-bottom: 20px;
        }
        ul {
            @extend list-type-ulli;
            li {
                span {
                    float: left;
                    width: 20px;
                    color: $yellow;
                    margin-top: 5px;
                    font-size: 12px;
                }
                p {
                    overflow: hidden;
                }
                &:first-child, &:nth-child(2) {
                    width: 47%;
                    float: left;
                }
                &:first-child {
                    margin-right: 30px;
                }
                &:nth-child(3) {
                    clear: both;
                }
            }
        }
    }
}

// Company skills 
.company-skills {
    @extend display-flex;
    .company-skills-video, .company-skills-content{
        width: 50%;
    }
    .company-skills-video {
        position: relative;
        figure {
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .overgradient {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;;
            background-color: transparent;
            background-image: linear-gradient(90deg,rgba(0,0,0,.9) 0,transparent 40%,transparent 60%);
            background-image: -webkit-linear-gradient(90deg,rgba(0,0,0,.9) 0,transparent 40%,transparent 60%);
            z-index: 2;
        }
        .info {
            position: absolute;
            bottom: 30px;
            left: 50px;
            z-index: 3;
            .video-title {
                font-family: 'Raleway', sans-serif;
                font-size: 18px;
                font-weight: bold;
                color: $yellow;
                margin-bottom: 8px;
                text-transform: uppercase;
            }
            .video-desc {
                color: #f2f2f2;
                font-size: 16px;
                span {
                    font-weight: bold;
                }
            }
        }
        .icon-play {
            position: absolute;
            bottom: 30px;
            right: 30px;
            background: $yellow;
            color: #fff;
            width: 60px;
            height: 60px;
            @include border-radius(50%);
            @extend display-flex;
            @include justify-content(center);
            @include align-items(center);
            font-size: 20px;
            z-index: 3;
            .fa {
                margin-left: 5px;
                font-size: 20px;
            }
        }
    }
    .company-skills-content {
        padding: 80px 300px 90px 60px;
        background: #f7f7f7;
        .section-title-left {
            margin-bottom: 20px;
        }
        .desc {
            margin-bottom: 25px;
        }
        .company-skills-list {
            ul {
                @extend list-type-ulli;
                li {
                    .title-regular-14 {
                        span {
                            &:nth-child(2) {
                                font-family: 'Source Sans Pro', sans-serif;
                            }
                        }
                    }
                    .progress {
                        margin: 10px 0 20px 0;
                        height: 10px;
                        @include border-radius(20px);
                    }
                    &:nth-child(3) {
                        .progress-bar {
                            background-color: #0dd5d3;
                        }
                    }
                    &:nth-child(4) {
                        .bg-info {
                            background-color: #2bdafa !important;
                        }
                    }
                    &:nth-child(5) {
                        .bg-danger {
                            background-color: #ff2d0a !important;
                        }
                    }
                }
            }
        }
    }
}

// Our team
.about-team {
    padding: 80px 0px;
}

//Why choose us
.choose-us-content {
    @extend display-flex;
    .section-title-left {
        h2 {
            color: #fff;
        }
    }
    .choose-us-list {
        background: $yellow;
        width: 50%;
        .choose-us-list-content {
            width: 63%;
            float: right;
            padding: 70px 70px 70px 15px;
            .section-title-left {
                h2 {
                    &:after {
                        background: #fff;
                    }
                }
            }
            ul {
                @extend list-type-ulli;
                li {
                    background: #fff;
                    margin-bottom: 20px;
                    
                    position: relative;
                    @include border-radius(0px);
                    border: none;
                    cursor: pointer;
                    .card-header {
                        padding: 0px;
                        border-bottom: 0px;
                        background-color: #fff;
                        // @include border-radius(0px);
                    }
                    .card-body {
                        padding: 15px 20px 30px 20px;
                        border-top: 1px solid #ccc;
                    }
                    .title {
                        padding: 13px 20px;
                        position: relative;
                        &:before {
                            position: absolute;
                            content: "+";
                            right: 20px;
                            top: 50%;
                            font-size: 22px;
                            font-weight: bold;
                            @include transform(translateY(-50%));
                            font-family: 'Source Sans Pro', sans-serif;
                        }
                    }
                    &:hover {
                        .title {
                            color: $yellow;
                        }
                    }
                    &:last-child {
                        margin-bottom: 0px;
                    }
                }
                .active {
                    .title {
                        &:before {
                            content: "-";
                        }
                    }
                }
            }
        }
    }
    .statistics-company {
        width: 50%;
        background: url('../images/aboutus/why-choose-us.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        .statistics-company-content {
            width: 70%;
            padding: 70px 15px 70px 70px;
            .statistics-content {
                padding: 0;
                overflow: hidden;
                .item {
                    border: 2px solid #fff;
                    overflow: hidden;
                    margin-bottom: 20px;
                    padding: 30px 40px 30px 10px;
                    margin-right: 20px;
                    float: left;
                    &:nth-child(2n) {
                        margin-right: 0px;
                    }
                    .info {
                        margin-top: -10px;
                        .title {
                            h3 {
                                font-weight: 600;
                            }
                        }
                        .count {
                            font-size: 30px;
                        }
                    }        
                }
            }
            .btn-global {
                margin-top: 15px;
            }
        }
    }
}
#modal-video-01 {
    background-color: rgba(0,0,0,0.8);
    z-index: 1250;
    .modal-dialog {
        // max-width: 900px;
        // margin: 160px auto;
        max-width: 50%;
        height: 100%;
        padding: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        flex-wrap: wrap;
        position: relative;
        margin: 30px auto;
        iframe {
            width: 100%;
            height: 100%;
        }
    }
}