.banner-wrapper{
    background-image: url("../images/company/company_banner_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-text {
    color: #fff;
}
.banner-text h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 8px;
}
.banner-text h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 160%; /* 38.4px */
    margin-bottom: 31px;
}
.banner-text p {
    font-size: 20px;
    font-weight: 400;
    line-height: 160%; /* 32px */
}
.banner-text .cta {
    margin-top: 39px;
}
.banner-desc{
    margin-top: 40px;
    margin-bottom: 80px;
}
.banner-left{
    max-width: 588px;
    width: 100%;
}

/* Our Values */
.values-wrapper{
    padding-bottom: 150px;
    background-image: url("../images/home/principles_banner.png");
    background-repeat: repeat;
    background-size: contain;
}
.values-desc{
    margin-top: 140px;
}
.values-desc h2 {
    color: #212326;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    line-height: 129.7%; /* 51.88px */
    text-transform: capitalize;
}
.values-desc p {
    color: #797979;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    text-transform: capitalize;
    margin: 20px auto 48px;
    max-width: 860px;
}

.values-cards {
    margin-top: 48px;
}
.vc-card{
    box-sizing: border-box;
    border-radius: 40px 0px;
    width: calc((100% / 3) - 25px);
    padding: 40px 20px 40px 40px;
}
.vc-card:nth-child(1){
    background: #F1F7FF;
}
.vc-card:nth-child(2){
    background: #FFF6EA;
}
.vc-card:nth-child(3){
    background: #FFF2F8;
}
.vc-card h3 {
    color: #212326;
    font-size: 30px;
    font-weight: 500;
    line-height: 129.7%; /* 38.91px */
    text-transform: capitalize;
    margin-top: 20px;
    margin-bottom: 14px;
}
.vc-card p{
    color: #797979;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    text-transform: capitalize;
}

/* Why work here */
.wwh-wrapper{
    background-image: url("../images/home/principles_banner.png");
    background-repeat: repeat;
    background-size: contain;
}
.wwh-section{
    background-image: url("../images/company/company_banner_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 40px 88px 103px 85px;
    box-sizing: border-box;
}
.wwh-top{
    margin-top: 40px;
    margin-bottom: 50px;
}
.wwh-top h2 {
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 129.7%; /* 51.88px */
    text-transform: capitalize;
}
.wwh-b-left,
.wwh-b-right{
    width: calc((100% / 2) - 68px);
}
.wwh-l-card{
    background-color: #F3F3F3;
    padding: 40px 47px;
    border-radius: 15px;
    margin-bottom: 10px;
}
.wwh-lc-inner{
    background-color: #fff;
    border-radius: 15px;
    padding: 25px 30px;
}
.wwh-lc-inner li {
    color: #212326;
    font-size: 19.703px;
    font-weight: 400;
    line-height: 251.2%; /* 49.493px */
    text-transform: capitalize;
    position: relative;
    margin-bottom: 4px;
}
.wwh-lc-inner li:before {
    content: '';
    background-image: url("../images/company/check.png");
    border: 10px solid #f3f3f3;
    position: absolute;
    left: -54px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
.wwh-b-right{
    border-radius: 15px;
    overflow: hidden;
}
.wwh-b-right img{
    max-width: 100%;
}

/* Timeline */
.timeline-wrapper{
    padding-top: 127px;
    padding-bottom: 128px;
    background-image: url("../images/home/principles_banner.png");
    background-repeat: repeat;
    background-size: contain;
}
.tl-right{
    width: 50%;
    flex-shrink: 0;
}
.tl-left{
    max-width: 50%;
    width: 439px;
    flex-shrink: 0;
    position: relative;
}
.tl-l-1{
    overflow: hidden;
    border-radius: 30px;
}
.tl-l-2{
    position: absolute;
    bottom: 42px;
    left: -42px;
    display: flex;
    border-radius: 20px;
    /* width: 231px; */
    max-width: 100%;
    /* height: 148px; */
    overflow: hidden;
}
.tl-l-3{
    position: absolute;
    bottom: 72px;
    right: -65px;
    display: flex;
    border-radius: 20px;
    /* width: 231px; */
    max-width: 100%;
    /* height: 148px; */
    overflow: hidden;
}
.timeline-section{
    border-radius: 40px 336px 336px 40px;
    background: #FFF6EA;
    padding: 95px 80px 95px 103px;
    box-sizing: border-box;
}
.tl-desc{
    position: relative;
    height: 388px;
    width: 362px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tl-desc::before{
    content: '';
    background-image: url("../images/company/timeline.svg");
    width: 362px;
    height: 388px;
    display: inline-block;
    position: absolute;
}
.tl-desc h3{
    color: #212326;
    font-size: 35.6px;
    font-weight: 700;
    line-height: 129.7%; /* 46.173px */
    text-transform: capitalize;
    margin-bottom: 8px;
    text-align: center;
}
.tl-desc p{
    color: #797979;
    text-align: center;
    font-size: 16.02px;
    font-weight: 400;
    line-height: 160%; /* 25.632px */
    text-transform: capitalize;
    max-width: 300px;
}
.tld-card {
    position: absolute;
}
.tld-card h5{
    color: rgba(38, 43, 50, 0.19);
    font-size: 35.6px;
    font-weight: 700;
    line-height: 129.7%; /* 46.173px */
    text-transform: capitalize;
}
.tld-card h6{
    color: #212326;
    font-size: 17.8px;
    font-weight: 500;
    line-height: 129.7%; /* 23.087px */
    text-transform: capitalize;
}
.tld-card-1{
    top: -70px;
}
.tld-card-2{
    top: 72px;
    right: -124px;
}
.tld-card-h h5{
    margin-right: 10px;
}
.tld-card-3{
    right: -80px;
    bottom: 74px;
}
.tld-card-4{
    bottom: -70px;
}

@media (max-width:1199px) {
    .wwh-bottom{
        align-items: center;
    }
    .wwh-l-card{
        padding: 20px 24px;
    }

    .timeline-section{
        border-radius: 40px;
    }
}

@media (max-width:991px) {
    .banner-right{
        width: 50%;
        flex-shrink: 0;
    }
    .banner-right img{
        max-width: 100%;
    }

    .values-cards{
        flex-wrap: wrap;
    }
    .vc-card{
        width: calc((100% / 2) - 25px);
        margin-bottom: 40px;
    }

    .wwh-section{
        padding: 20px;
    }
    .wwh-b-right{
        display: none;
    }
    .wwh-b-left{
        flex-direction: row;
        width: 100%;
    }
    .wwh-l-card{
        width: calc((100% / 2) - 60px)
    }

    .timeline-section{
        flex-direction: column;
        padding-bottom: 130px;
    }
    .tl-right{
        margin-top: 174px;
        width: 100%;
    }
    .tl-desc{
        margin: 0;
        margin-right: auto;
    }
}

@media (max-width:767px) {
    .banner-desc{
        flex-direction: column;
        margin-bottom: 100px;
    }
    .banner-left{
        order:2;
        margin-top: 30px;
    }
    .banner-right{
        width: 80%;
        text-align: center;
    }

    .values-desc{
        margin-top: 100px;
    }
    .values-wrapper{
        padding-bottom: 100px;
    }
    .vc-card{
        width: 100%;
        text-align: center;
    }

    .wwh-b-left{
        flex-direction: column;
        align-items: center;
    }
    .wwh-l-card{
        width: calc(100% - 100px);
        box-sizing: border-box;
    }

    .tl-left{
        max-width: 100%;
    }

    .timeline-section{
        padding: 95px 40px 95px 40px;
    }
    .timeline-wrapper{
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width:800px) {
    .banner-desc{
        margin-bottom: 50px;
    }
    .values-desc{
        margin-top: 50px;
    }
    .values-desc p{
        margin-bottom: 0;
    }
    .values-wrapper{
        padding-bottom: 60px;
    }
    .vc-card{
        padding-left: 20px;
    }

    .wwh-top{
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .wwh-top h2{
        font-size: 25px;
        margin-bottom: 10px;
    }
    .wwh-l-card{
        width: 100%;
        padding: 15px;
    }

    .timeline-section{
        padding: 95px 5px 95px 5px;
    }
    .tl-desc{
        width: 100%;
        height: auto;
    }
    .tl-desc::before {
        background-size: contain;
        background-repeat: no-repeat;
        width: 280px;
        height: 280px;
    }

    .tl-l-2, .tl-l-3{
        display: none;
    }

    .tl-desc::before{
        content: none;
    }
    .tld-card{
        position: static;
        margin-top: 20px;
    }
    .tl-label{
        order: -1;
    }
    .tld-card-v{
        flex-direction: row;
    }
    .tld-card-v h5{
        order: -1;
    }
    .tld-card h5{
        margin-right: 10px;
    }
    .tl-right{
        margin-top: 50px;
    }
    .tl-left{
        padding: 0 20px;
        box-sizing: border-box;
    }
}