.slider {
    height: 80vh;
    width: 100%;
    min-height: 700px;
    background: url("../img/backgrounds/slider-bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 105px;
    font-size: 3.7rem;
    padding-left: 15px;
    padding-right: 15px;
}
    .slider img {
       height:415px;
    }

    .slider h1 {
        font-size: 3.7rem;
    }


.carousel-indicators {
    bottom: -17px;
}

    .carousel-indicators li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .carousel-indicators .active {
        background-color: transparent;
        border: 3px solid #fff;
    }

.cd-headline-2 {
    font-size: .9em;
}

.slider-text {
    font-size: 18px;
    width: 550px;
    height: 400px;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.slider-text h3 {
    font-style:italic;
}
.all-system {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    height:30px;
}
@media screen and (max-width:480px) {
    .slider h1 {
        font-size: 1.2em;
        padding-top: 15px;
    }
    .slider h3 {
        font-size:1em;
    }
}

@media screen and (max-width:767px) {
    .all-system {
        justify-content:center;
        
    }
}
.all-system img {
    width:25px !important;
}

@media screen and (max-width:767px) {
    .slider-text {
        height: 170px;
    }

    .responsive-text h1{
        font-size:1.8em !important;
    }

    .slider img {
        height:250px;
    }
    .slider h1 {
        font-size: 2.1em !important;
    }

    .slider-text h1, h3 {
        text-align: center;
    }

    .carousel-inner {
        margin-top: 0;
    }
    .carousel-indicators {
        bottom: -60px;
    }
}
@media screen and (min-width:767px) and (max-width:991px){
    .slider img {
        height: auto;
    }
    .slider {
        padding-top: 160px;
    }
}
@media screen and (max-width:991px) {
    .slider h1 {
        font-size: 2.7em;
    }
}
@media screen and (max-width:1024px) {
    .slider {
        height: 75vh;
    }
}

.band-1,
.band-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    min-height: 100px;
}

.band-1 {
    background-image: linear-gradient(to right, #ffc371, #ff5f6d);
}

.band-2 {
    background-image: linear-gradient(to left, #ffc371, #ff5f6d);
}

.what-we-do,
.how-do-we-do {
    display: flex;
    justify-content: center;
}

    .what-we-do p,
    .how-do-we-do p {
        text-align: center;
        max-width: 850px;
        line-height: 2.1;
        padding-top: 2em;
    }

    .what-we-do h1,
    .how-do-we-do h1 {
        position: relative;
    }

    .what-we-do:after {
        content: "";
        position: absolute;
        width: 250px;
        top: 32%;
        border-bottom: 2px solid #333333;
    }

    .how-do-we-do:after {
        content: "";
        position: absolute;
        width: 250px;
        top: 25%;
        border-bottom: 2px solid #333333;
    }



.main-timeline {
    position: relative;
}

    .main-timeline:before {
        content: "";
        width: 5px;
        height: 100%;
        border-radius: 20px;
        margin: 0 auto;
        background: #242922;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .main-timeline .timeline {
        display: inline-block;
        margin-bottom: 50px;
        position: relative
    }

        .main-timeline .timeline:before {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 4px solid #fff;
            background: #ec496e;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            transform: translate(-50%,-50%)
        }

    .main-timeline .timeline-icon {
        display: inline-block;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        border: 3px solid #ec496e;
        padding: 13px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 30%;
        transform: translateY(-50%)
    }

        .main-timeline .timeline-icon i {
            display: block;
            border-radius: 50%;
            background: #ec496e;
            font-size: 64px;
            color: #fff;
            line-height: 100px;
            z-index: 1;
            position: relative
        }

        .main-timeline .timeline-icon:after, .main-timeline .timeline-icon:before {
            content: "";
            width: 100px;
            height: 4px;
            background: #ec496e;
            position: absolute;
            top: 50%;
            right: -100px;
            transform: translateY(-50%)
        }

        .main-timeline .timeline-icon:after {
            width: 70px;
            height: 50px;
            background: #fff;
            top: 89px;
            right: -30px
        }

    .main-timeline .timeline-content {
        width: 50%;
        padding: 0 50px;
        margin: 52px 0 0;
        float: right;
        position: relative
    }

        .main-timeline .timeline-content:before {
            content: "";
            width: 70%;
            height: 100%;
            border: 3px solid #ec496e;
            border-top: none;
            border-right: none;
            position: absolute;
            bottom: -13px;
            left: 35px
        }

    /*.main-timeline .timeline-content:after {
            content: "";
            width: 37px;
            height: 3px;
            background: #ec496e;
            position: absolute;
            top: 13px;
            left: 0
        }*/

    .main-timeline .title {
        font-size: 20px;
        font-weight: 600;
        color: #ec496e;
        text-transform: uppercase;
        margin: 0 0 5px
    }

    .main-timeline .hexagon {
        display: inline-block;
        font-size: 16px;
        color: #404040;
        line-height: 20px;
        letter-spacing: 1px;
        margin: 0
    }

    .main-timeline .timeline:nth-child(even) .timeline-icon {
        left: auto;
        right: 30%
    }

        .main-timeline .timeline:nth-child(even) .timeline-icon:before {
            right: auto;
            left: -100px
        }

        .main-timeline .timeline:nth-child(even) .timeline-icon:after {
            right: auto;
            left: -30px
        }

    .main-timeline .timeline:nth-child(even) .timeline-content {
        float: left
    }

        .main-timeline .timeline:nth-child(even) .timeline-content:before {
            left: auto;
            right: 35px;
            transform: rotateY(180deg)
        }

        .main-timeline .timeline:nth-child(even) .timeline-content:after {
            left: auto;
            right: 0
        }

    .main-timeline .timeline:nth-child(2n) .timeline-content:after, .main-timeline .timeline:nth-child(2n) .timeline-icon i, .main-timeline .timeline:nth-child(2n) .timeline-icon:before, .main-timeline .timeline:nth-child(2n):before {
        background: #f9850f
    }

    .main-timeline .timeline:nth-child(2n) .timeline-icon {
        border-color: #f9850f
    }

    .main-timeline .timeline:nth-child(2n) .title {
        color: #f9850f
    }

    .main-timeline .timeline:nth-child(2n) .timeline-content:before {
        border-left-color: #f9850f;
        border-bottom-color: #f9850f
    }

    .main-timeline .timeline:nth-child(3n) .timeline-content:after, .main-timeline .timeline:nth-child(3n) .timeline-icon i, .main-timeline .timeline:nth-child(3n) .timeline-icon:before, .main-timeline .timeline:nth-child(3n):before {
        background: #8fb800
    }

.tech-2 {
    left: 319px;
    top: 107px;
    transform: rotate(18deg);
}

.tech-1 {
    transform: rotate(-18deg);
    top: -95px;
    left: -21px;
}

.main-timeline .timeline:nth-child(3n) .timeline-icon {
    border-color: #8fb800
}

.main-timeline .timeline:nth-child(3n) .title {
    color: #8fb800
}

.main-timeline .timeline:nth-child(3n) .timeline-content:before {
    border-left-color: #8fb800;
    border-bottom-color: #8fb800
}

.main-timeline .timeline:nth-child(4n) .timeline-content:after, .main-timeline .timeline:nth-child(4n) .timeline-icon i, .main-timeline .timeline:nth-child(4n) .timeline-icon:before, .main-timeline .timeline:nth-child(4n):before {
    background: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .timeline-icon {
    border-color: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .title {
    color: #2fcea5
}

.main-timeline .timeline:nth-child(4n) .timeline-content:before {
    border-left-color: #2fcea5;
    border-bottom-color: #2fcea5
}

@media only screen and (max-width:1200px) {
    .main-timeline .timeline-icon:before {
        width: 50px;
        right: -50px
    }

    .main-timeline .timeline:nth-child(even) .timeline-icon:before {
        right: auto;
        left: -50px
    }

    .main-timeline .timeline-content {
        margin-top: 75px
    }
}

@media only screen and (max-width:990px) {
    .main-timeline .timeline {
        margin: 0 0 10px
    }

    .main-timeline .timeline-icon {
        left: 25%
    }

    .main-timeline .timeline:nth-child(even) .timeline-icon {
        right: 25%
    }

    .main-timeline .timeline-content {
        margin-top: 115px
    }
}

@media only screen and (max-width:767px) {
    .main-timeline {
        padding-top: 50px
    }

        .main-timeline:before {
            left: 80px;
            right: 0;
            margin: 0
        }

        .main-timeline .timeline {
            margin-bottom: 70px
        }

            .main-timeline .timeline:before {
                top: 0;
                left: 83px;
                right: 0;
                margin: 0
            }

        .main-timeline .timeline-icon {
            width: 60px;
            height: 60px;
            line-height: 40px;
            padding: 5px;
            top: 0;
            left: 0
        }

        .main-timeline .timeline:nth-child(even) .timeline-icon {
            left: 0;
            right: auto
        }

            .main-timeline .timeline-icon:before, .main-timeline .timeline:nth-child(even) .timeline-icon:before {
                width: 25px;
                left: auto;
                right: -25px
            }

            .main-timeline .timeline-icon:after, .main-timeline .timeline:nth-child(even) .timeline-icon:after {
                width: 25px;
                height: 30px;
                top: 44px;
                left: auto;
                right: -5px
            }

        .main-timeline .timeline-icon i {
            font-size: 30px;
            line-height: 45px
        }

        .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content {
            width: 100%;
            margin-top: -15px;
            padding-left: 130px;
            padding-right: 5px
        }

        .main-timeline .timeline:nth-child(even) .timeline-content {
            float: right
        }

            .main-timeline .timeline-content:before, .main-timeline .timeline:nth-child(even) .timeline-content:before {
                width: 50%;
                left: 120px
            }

            .main-timeline .timeline:nth-child(even) .timeline-content:before {
                right: auto;
                transform: rotateY(0)
            }

            .main-timeline .timeline-content:after, .main-timeline .timeline:nth-child(even) .timeline-content:after {
                left: 85px
            }
}

@media only screen and (max-width:479px) {
    .main-timeline .timeline-content, .main-timeline .timeline:nth-child(2n) .timeline-content {
        padding-left: 110px
    }

        .main-timeline .timeline-content:before, .main-timeline .timeline:nth-child(2n) .timeline-content:before {
            left: 99px
        }

        .main-timeline .timeline-content:after, .main-timeline .timeline:nth-child(2n) .timeline-content:after {
            left: 65px
        }
}

.main-timeline5 {
    /*overflow: hidden;*/
    position: relative;
    transform: rotate(90deg);
    margin-bottom: 200px;
    margin-top: 100px;
}

    .main-timeline5 .timeline {
        position: relative;
        margin-top: 45px
    }

        .main-timeline5 .timeline:first-child {
            margin-top: 0;
        }

    .main-timeline5 .timeline-icon, .main-timeline5 .year {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .main-timeline5 .timeline:after, .main-timeline5 .timeline:before {
        content: "";
        display: block;
        width: 100%;
        clear: both
    }

    /*.main-timeline5 .timeline:before {
        content: "";
        width: 100%;
        height: 100%;
        box-shadow: -8px 0 5px -5px rgba(0,0,0,.5) inset;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2
    }*/

    .main-timeline5 .timeline-icon {
        width: 210px;
        height: 207px;
        border-radius: 2%;
        border: 4px dotted transparent;
        /*border-top-color: #f44556;
        border-right-color: #f44556;*/
        border-bottom-color: rgb(204,181,213);
        z-index: 1;
        transform: rotate(-180deg)
    }

    .main-timeline5 .year {
        display: block;
        width: 150px;
        height: 150px;
        line-height: 130px;
        border-radius: 50%;
        border: 10px solid #fff;
        background: #8AC440;
        box-shadow: 0 0 20px rgba(0,0,0,.4);
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        transform: rotate(90deg)
    }

        .main-timeline5 .year sup {
            font-size: 12px;
            font-weight: 300;
            vertical-align: text-top;
            margin-left: -30px;
        }

    .main-timeline5 .timeline-content {
        width: 37%;
        float: right;
        /*background: #f44556;*/
        /*padding: 30px 20px;*/
        margin: 79px 0;
        z-index: 1;
        position: relative
    }

        .main-timeline5 .timeline-content:before {
            content: "";
            width: 50%;
            height: 4px;
            background: #f44556;
            position: absolute;
            top: 50%;
            left: -20%;
            z-index: -1;
            transform: translateY(-50%)
        }
    /*.main-timeline5 .timeline-content:after {
            content: "";
            width: 10%;
            height: 41px;
            background: #f44556;
            position: absolute;
            left: 20%;
            margin-top: -20px;
            z-index: -1;
        }*/

    .main-timeline5 .title {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin: 0 0 10px
    }

    .main-timeline5 .hexagon {
        font-size: 16px;
        color: #000;
        line-height: 24px;
        margin: 0;
        width: 10%;
        height: 41px;
        /*background: #f44556;*/
        position: absolute;
        left: 20%;
        margin-top: -20px;
        z-index: -1;
    }

    .main-timeline5 .timeline:nth-child(n) .hexagon {
        background-color: #8AC440;
    }

    .main-timeline5 .timeline:nth-child(3n) .hexagon {
        background-color: #DF0A17;
        position:relative;
    }
        .main-timeline5 .timeline:nth-child(3n) .hexagon:after {
            position:absolute;
            width:25px;
        }

        .main-timeline5 .timeline:nth-child(2n) .hexagon {
            background-color: #AF82B7;
            left: 85%;
        }


    .main-timeline5 .timeline:nth-child(n) .timeline-icon {
        border-top-color: rgb(154,181,185);
        border-right-color: rgb(161,193,160);
    }

    .main-timeline5 .timeline:nth-child(2n):before {
        box-shadow: 8px 0 5px -5px rgba(0,0,0,.5) inset
    }

    .main-timeline5 .timeline:nth-child(2n) .timeline-icon {
        transform: rotate(0deg);
        border-top-color: rgb(138,169,175);
        border-right-color: rgb(114,141,179);
        margin-left: 49%;
    }

    .main-timeline5 .timeline:nth-child(2n) .year {
        transform: rotate(-90deg);
        background-color: #AF82B7;
    }

    .main-timeline5 .timeline:nth-child(2n) .timeline-content {
        float: left
    }

        .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
            left: auto;
            right: -45%
        }

        .main-timeline5 .timeline:nth-child(2n) .timeline-content, .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
            background: #AF82B7 !important;
        }

    .main-timeline5 .timeline:nth-child(2n) .timeline-content, .main-timeline5 .timeline:nth-child(n) .timeline-content:before {
        background: #8AC440
    }

    .main-timeline5 .timeline:nth-child(3n) .timeline-icon {
        border-top-color: rgba(223,10,23,0.52);
        border-right-color: rgb(238,127,134);
    }

    .main-timeline5 .timeline:nth-child(3n) .year {
        background-color: #DF0A17;
    }

    .main-timeline5 .timeline:nth-child(3n) .timeline-content, .main-timeline5 .timeline:nth-child(3n) .timeline-content:before {
        background: #DF0A17;
    }

    .main-timeline5 .timeline:nth-child(4n) .timeline-icon {
        border-top-color: #105572;
        border-right-color: #105572
    }


    .main-timeline5 .timeline:nth-child(4n) .timeline-content, .main-timeline5 .timeline:nth-child(4n) .timeline-content:before {
        background: #105572
    }

@media only screen and (max-width:1199px) {
    .main-timeline5 .timeline {
        /*margin-top: -103px*/
    }

    .main-timeline5 .timeline-content:before {
        left: -18%
    }

    .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
        right: -18%
    }
}

@media only screen and (max-width:990px) {
    .main-timeline5 .timeline {
        /*margin-top: -127px*/
    }

    .main-timeline5 .timeline-content:before {
        left: -2%
    }

    .main-timeline5 .timeline:nth-child(2n) .timeline-content:before {
        right: -2%
    }
}



.content-titles {
    position: absolute;
    transform: rotate(-107deg);
    width: 200px;
    left: 85px;
}

.tech-1 .content-titles {
    transform: rotate(-72deg);
    left: 42px;
    bottom: -23px;
}

.tech-2 .content-titles {
    bottom: -8px;
    left: 55px;
}

.content-titles h1 {
    color: #DF0A17;
    font-size: 20px;
}

.hbb .content-titles {
    transform: rotate(-90deg) !important;
    left: -170px !important;
    bottom: 15px;
}

.hbb h1 {
    color: #AF82B7;
}

.hw .content-titles {
    transform: rotate(-90deg) !important;
    left: 5px;
    bottom: 75px !important;
}

.hw h1 {
    color: #8AC440;
}

.after-logo-dot {
    position: absolute;
    display: flex;
    justify-content: center;
    margin-left: 216px;
    margin-top: 53px;
}

    .after-logo-dot span {
        background-color: #f08f95;
        border-radius: 50%;
        width: 4px;
        height: 4px;
        margin-left: 6px;
    }

.after-arrow-dot {
    position: absolute;
    display: flex;
    justify-content: center;
    right: 60px;
    bottom: 227px;
    transform: rotate(90deg);
}

    .after-arrow-dot span {
        background-color: #707070;
        border-radius: 50%;
        width: 4px;
        height: 4px;
        margin-left: 6px;
    }

.shape {
    position: relative;
    width: 50px;
    height: 28.87px;
    background-color: #DF0A17;
    margin: 14.43px 0;
}

    .shape:before,
    .shape:after {
        content: "";
        position: absolute;
        width: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }

    .shape:before {
        bottom: 100%;
        border-bottom: 14.43px solid #DF0A17;
    }

    .shape:after {
        top: 100%;
        width: 0;
        border-top: 14.43px solid #DF0A17;
    }

.content-titles .tooltip-on {
    display: none;
}

.content-titles .tooltips:hover .tooltip-on {
    display: block;
}

.content-titles .tooltip-on {
    width: 150px;
    height: 150px;
    background-color: rgba(255, 195, 113, 0.50);
    position:absolute;
    z-index:9999;
    bottom: 85%;
    left: 0;
}