@import "partials/_variables.scss";


.about{


    .hero{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 60vh;
        min-height: 650px;
        .h-faces{
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            z-index: 1;
            width: 27%;
            height: 100%;
            .h-unit{
                width: 30%;
                background-color: #f9f9f9;
                border-radius: 20px;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: all 2s linear;
                img{
                    width: 100%;
                    display: block;
                    margin: auto;
                }
            }
            .p-blue{
                background-color: #e6effc;
            }
            .p-blued{
                background-color: #c9e0fd;
            }
            .p-bluel{
                background-color: #a7cbfb;
            }
        }
        .h-l{
            top: 0;
            left: 0;
            .h-a{
                transform: translateX(130%) translateY(-90%) scale(1.2) rotate(10deg);
            }
            .h-b{
                transform: translateX(-40%) translateY(50%) scale(1) rotate(-16deg);
            }
            .h-c{
                transform: translateX(-20%) translateY(25%) scale(0.6) rotate(15deg);
                filter: blur(5px);
            }
        }
        .h-r{
            top: 0;
            right: 0;
            .h-a{
                transform: translateX(100%) translateY(-120%) scale(1.1) rotate(-10deg);
            }
            .h-b{
                transform: translateX(10%) translateY(40%) scale(0.8) rotate(14deg);
            }
            .h-c{
                transform: translateX(-210%) translateY(30px) scale(0.4) rotate(-15deg);
                filter: blur(5px);
            }
        }
        .br-boxed{
            z-index: 2;
            position: relative;
            text-align: center;
            h1{
                font-size: 80px;
                font-weight: 900;
                font-family: "Barlow";
                color: #434343;
                margin: 10px 0;
                text-transform: uppercase;
                line-height: 80px;
            }
            .is-yellow {
                color: #f1b60d;
                font-weight: 900;
                font-family: "Barlow";
            }
            p{
                color: #666666;
                font-family: "Brandon";
                font-size: 20px;
                max-width: 650px;
                margin: 40px auto 0;
                line-height: 30px;
            }
        }
    }

    .mobile-features{
    }

    .mobile-center{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 200px;
        .mobile{
            max-width: 350px;
            margin: 0 auto;
            transition: all .2s linear;
            z-index: 1;
            img{
                width: 100%;
                display: block;
                margin: auto;
                max-width: 500px;
            }
        }
        .feat-wrap{
            position: absolute;
            z-index: 2;
            top: 0;
            margin-top: 10%;
        }
        .feat-unit{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 0 60px 0 rgba(29, 88, 120, 0.15);
            border-radius: 15px;
            overflow: hidden;
            padding: 10px;
            max-width: 230px;
            position: relative;
            margin-bottom:0px;
            .fu-l{
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                background: #c9c9c9;
                width: 30px;
                height: 30px;
                padding: 5px;
                margin-right: 5px;
                img{
                    display: block;
                    width: 100%;
                    margin: auto;
                }
                svg{
                    width: 70%;
                    path{
                        fill: #434343;
                        stroke-width: 1px;
                    }
                }
            }
            .ful-1{
                background: #d4f7d8;
            }
            .ful-2{
                background: #ffe8ad;
            }
            .ful-3{
                background: #ffc6ab;
            }
            .ful-4{
                background: #d4f1f7;
            }
            .ful-5{
                background: #f6f7d4;
            }
            .ful-6{
                background: #e5d4f7;
            }
            .fu-r{
                width: 75%;
                p{
                    font-family: 'Barlow';
                    font-weight: bold;
                }
            }
        }
        .trigger{

        }
        .feat-unit:nth-child(odd){
            left: -200px;
        }
        .feat-unit:nth-child(even){
            right: -200px;
        }
        .su-1{
            left: -200px;
        }

        .su-l, .su-r{
            opacity: 0;
            transition: all .2s linear;
        }

        .su-l{
            left: -300px !important;
        }
        .su-r{
            right: -300px !important;
        }

        .su-l.wrk, .su-r.wrk{
            opacity: 1;
        }
        .su-l.wrk{
            left: -200px !important;
        }
        .su-r.wrk{
            right: -200px !important;
        }

    }

    .objectives{
        margin-bottom: 200px;
        .obj-w{
            display: flex;
            justify-content: space-between;
            margin: auto;
            max-width: 850px;
            margin-top: 100px;
            flex-wrap: wrap;
        }
        .ow-unit{
            width: 48%;
            aspect-ratio: 1 / 1;
            img{
                display: block;
                width: 100%;
                margin: 0 auto;
                max-width: 380px;
            }
            .o-i{
                aspect-ratio: 1 / 1;
                border-radius: 20px;
                overflow: hidden;
            }
            h3, h3 span.is-yellow{
                font-family: 'Barlow';
                font-weight: bold;
                margin: 30px 0 20px 0;
                font-size: 30px;
                line-height: 35px;
            }
            p{
                font-size: 16px;
            }
        }
        .ow-l{
            .o-i{
                background-color: #f1b60d;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
            }
            img{
                position: relative;
                bottom: -100px;
            }
        }
        .ow-r{
            .o-i{
                background-color: #f68506;
            }
            img{
                position: relative;
                top: -100px;
            }
        }
    }

    .app{
        background-color: #005a7b;
        padding: 150px 0;
        margin: 100px 0 0;
        p, h2, h3{
            color: #fff;
            border-color: #fff;
        }
        .section-header{
            margin-bottom: 100px;
        }
        .app-w{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            .aw-l, .aw-r{
                width: 49%;
            }
            .aw-l{
                img{
                    display: block;
                    width: 100%;
                    margin: auto;
                    max-width: 350px;
                }
            }
        }
        .aw-u{
            margin-bottom: 30px;
            h3{
                font-family: 'Barlow';
                font-weight: bold;
                margin: 10px 0;
            }
            .a-im img{
                display: block;
                width: 100%;
                margin: auto;
            }
            .a-im{
                padding: 0px;
                border-radius: 12px;
                background: #28739c;
                font-size: 36px;
                margin: 0;
                border: solid 3px #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 60px;
                box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
            }
        }
    }

    .slide-0{
        background-color: #a7cbfb !important;
        h2 span.is-yellow{
            color: #256e84 !important;
        }
    }

    .slide-1{
        background-color: #fdd361 !important;
        h2 span.is-yellow{
            color: #f7a901 !important;
        }
    }

    .slide-2{
        background-color: #fcc17d !important;
        h2 span.is-yellow{
            color: #f37008 !important;
        }
    }

    .user-case{
        background-color: #f6f6f6;
        padding: 100px 0 150px 0;
        position: relative;
        transition: all .2s linear;
        h2{
            color: #fff;
            transition: all .2s linear;
        }
        .bg-a{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #fff;
            opacity: .2;
        }
        .glide__slide{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 100px 0;
            flex-wrap: wrap;
        }

        .br-boxed{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            .uc-l,  .uc-r{
                width: 45%;
                img{
                    display: block;
                    width: 100%;
                    margin: auto;
                }
            }
            h2, span.is-yellow{
                font-family: "Barlow" !important;
                font-size: 50px;
                line-height: 50px;
                margin: 20px 0;
            }
            p{
                font-size: 18px;
                line-height: 35px;
            }
            .ucr-inner{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .is-box, .usr{
                position: absolute;
            }
            .usr{
                z-index: 1;
            }
            .is-box{
                z-index: 2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fff;
                box-shadow: 0 0 60px 0 rgba(29, 88, 120, 0.15);
                border-radius: 15px;
                overflow: hidden;
                padding: 10px;
                min-width: 240px;
                .ib-l{
                    width: 15%;
                    margin-right: 5%;
                    svg{
                        width: 100%;
                        max-width: 40px;
                    }
                }
                .ib-r{
                    width: 79%;
                    p{
                        font-size: 15px;
                        font-family: 'Barlow';
                        font-weight: bold;
                        display: inline-flex;
                        white-space: nowrap;
                        line-height: 20px;
                    }
                    span{
                        display: block;
                        text-align: right;
                        line-height: 20px;
                        margin: 0;
                    }
                }
            }
            .money{
                top: -180px;
                right: 40px;
            }
            .co2{
                bottom: -170px;
                right: 40px;
                span{
                    text-align: left !important;
                    font-weight: bold;
                    font-size: 20px;
                }
            }
            .add{
                position: absolute;
                bottom: -200px;
                left: -20px;
                max-width: 160px;
                z-index: 2;
                background: #fff;
                border-radius: 15px;
                box-shadow: 0 0 60px 0 rgba(29, 88, 120, 0.15);
                img{
                    display: block;
                    width: 100%;
                    margin: auto;
                }
            }
        }

        .glide__track{
            position: relative;
        }
        .glide__arrows{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .glide__arrow{
                width: 45%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: solid 2px #fff;
                padding: 10px;
                background-color: #ffffff00 !important;
                svg{
                    width: 20px;
                    path{
                        fill: #fff;
                    }
                }
            }
            .glide__arrow--left{
                svg{
                    transform: rotate(180deg);
                }
            }
        }
    }

    .timeline{
        .section-header{
            margin: 100px auto;
        }
        .story{
            position: relative;
            margin-bottom: 250px;
        }
        .s-block{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 30px 0;
            .s-illu{
                width: 45%;
                display: none;
                img{
                    width: 50%;
                    display: block;
                    margin: auto;
                }
            }
            .s-line-block{
                width: 10%;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 250px;
                .s-dot{
                    width: 20px;
                    height: 20px;
                    border-radius: 100%;
                    background-color: #f6f6f6;
                    transition: all .2s linear;
                    border: solid 0px #fff;
                    position: relative;
                    z-index: 2;
                }
                .hit{
                    background-color: #ffffff;
                    border: solid 10px #f68506;
                }
            }
            .scroline{
                position: absolute;
                width: 5px;
                top: 0;
                background-color: #f68506;
                border-radius: 10px;
                z-index: 1;
            }
            .s-text{
                width: 45%;
                max-width: 550px;
                position: absolute;
                background-color: #fff;
                z-index: 2;
                margin-top: 300px;
                text-align: center;
                padding: 30px;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 0 60px 0 rgba(29, 88, 120, 0.15);
                span, h3{
                    font-family: 'Barlow';
                }
                h3{
                    font-weight: bold;
                }
            }
        }
        .bs{
            background: #ff4d00;
            background: linear-gradient(180deg, rgba(255, 77, 0, 1) 0%, rgba(255, 112, 0, 1) 35%, rgba(241, 182, 13, 1) 100%);
            //background: #00447B;
            //background: linear-gradient(180deg,rgba(0, 68, 123, 1) 0%, rgba(0, 68, 123, 1) 43%, rgba(255, 255, 255, 1) 98%);
            //background: #144864;
            //background: linear-gradient(180deg,rgba(20, 72, 100, 1) 0%, rgba(36, 107, 145, 0.86) 54%, rgba(255, 255, 255, 1) 98%);
            position: absolute;
            height: 100%;
            width: 50%;
        }
        .bs-l{
            top: 0;
            left: -200%;
            transform: rotate(-15deg);
        }
        .bs-r{
            top: 0;
            right: -200%;
            transform: rotate(15deg);
        }

    }

    .team{
        .section-header{
            margin: 100px auto;
        }
        .t-grid{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .t-unit{
            width: 19%;
            margin-bottom: 10px;
            img{
                width: 100%;
                display: block;
                margin: auto;
                border-radius: 20px;
                overflow: hidden;
            }
            h3{
                font-family: 'Barlow';
                font-weight: bold;
                margin-top: 10px;
                line-height: 20px;
                text-align: center;
                font-size: 15px;
            }
            p{
                text-align: center;
            }
        }
    }

    .media{
        margin: 100px auto;
        .med-wrap{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin: 100px 0;
        }
        .med-unit{
            background-color: #fdfaf1;
            padding: 10px;
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 14%;
            img{
                width: 100%;
                display: block;
                margin: auto;
            }
        }

    }

    .download-app{
        margin-top: 200px;
        .download{
            margin-bottom: 0;
            padding: 120px 0;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
        }
        .download-inner{
            flex-direction: row-reverse;
        }
    }


}


@media screen and (max-width: 700px) {

    .about .hero{
        margin-top: 130px;
        .h-l{
            display: none;
        }
        .h-r{
            width: 100%;
            top: -300px;
            .h-a{
                transform: translateX(110%) translateY(-50%) scale(1.1) rotate(-10deg);
            }
        }
        .br-boxed {
            margin-top: 200px;
            width: unset;
            h1 {
                text-align: left;
                font-size: 50px;
                margin: 0;
                line-height: 60px;
            }
            p{
                text-align: left;
            }
        }
    }

    .about {
        .mobile{
            opacity: .5;
        }
        & .mobile-center {
            .su-l.wrk {
                left: -60px !important;
            }
            .su-r.wrk {
                right: -60px !important;
            }
        }
        .mobile-features {
            margin-top: 100px;
            margin-bottom: -100px;
        }
    }

    .about {
        & .objectives {
            margin-bottom: 50px;
            .ow-unit {
                width: 100%;
                aspect-ratio: 1 / 1;
            }
            .ow-unit:first-of-type{
                margin-bottom: 40px;
            }
        }
        .app{
            padding: 50px 0;
            .app-w {
                .aw-l, .aw-r {
                    width: 100%;
                }
                .aw-l{
                    margin-bottom: 40px;
                }
            }
        }
        .user-case{
            padding: 100px 0;
            .br-boxed {
                .uc-l, .uc-r {
                    width: 100%;
                }
                .uc-l{
                    margin-bottom: 250px;
                }
            }
        }
        .timeline {
            .story{
                margin-bottom: 150px;
            }
            .s-block {
                .s-text {
                    width: 75%;
                }
            }
        }
        .team {
            .t-unit {
                width: 48%;
                margin-bottom: 10px;
            }
        }
        .media {
            margin: 50px auto;
            .med-wrap {
                margin: 50px 0;
            }
        }
        .media {
            .med-unit {
                width: 43%;
                margin-bottom: 7px;
            }
        }
        .download-app {
            margin-top: 100px;
        }
    }

    .add{
        display: none;
    }
    .about {
        & .user-case {
            .glide__slide {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 0 250px 0;
                flex-wrap: wrap;
            }
        }
    }
}