@import 'common.less';
@import 'animate.css';

// BANNER
.banner{
    .owl-item{
        overflow: hidden;
        .item{        
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center top;
            @media(max-width:767px){
               background-position: right top;
               position: relative;
               &:after{
                   .con-pos();
                   width: 100%;
                   height:100%;
                   background: white;
                   opacity: 0.6;
                   left: 0;
                   top: 0;
               }
               .container{
                   position: relative;
                   z-index: 5;
               }
            }
            .col-lg-12{                
                height: 650px;
                @media(max-width:767px){
                   height: 540px;
                }
                width: 100%;
                flex-direction: row;
                .flex();
                align-items: center;
            }
            .ban-con{
                position: relative;
                padding:0;
                @media(max-width:767px){
                    top: 55px;
                }
                h3{
                    color: @blue;
                    font-size: 88px;
                    font-weight: 700;
                    transition: all 800ms linear;
                    line-height: 58px;
                    @media(max-width:767px){
                        font-size: 45px;
                        line-height: 48px;
                    }
                    small{
                        font-size: 21px;
                        display: block;
                    }
                    span{
                        color: @base;
                        display: block;
                        font-size: 38px;
                        @media(max-width:767px){
                            font-size: 24px;
                        }
                    }
                    + p{
                        @media(min-width:1000px){
                            width: 500px;
                        }
                        transition: all 800ms linear;
                        transform: translateX(0px);
                    }
                }                
                .last{
                    width: 292px;
                }
                img{
                    margin: 20px 0;
                    transition: all 1000ms linear;
                    // transform: translateX(-50px);
                    + h4{
                        text-transform: lowercase;
                        span{
                            text-transform: uppercase;
                            color: #eb1c24;
                            font-weight: 600;
                        }
                    }
                }
                
                h5 {
                    text-align: center;
                    color: white;
                    margin:10px 0;
                    transition: all 800ms linear;
                    // transform: translateX(-50px);
                    img{
                        margin: 0;
                        width: 28px;
                        display: inline-block; 
                        transform: translateX(0);
                    }
                    span{
                        background: white;
                        color: #eb1c24;
                        font-weight: 600;
                        padding: 0 5px;
                        text-transform: uppercase;
                    }
                }
                h4 {
                    color: @white;
                    font-size: 30px;
                    text-align: center;
                    transition: all 800ms linear;
                    // transform: translateX(-50px);
                    text-transform: uppercase;
                    // opacity: 0;
                }
                
                 ul{
                    width: 200px;
                    margin: @v auto 0;
                    li{
                        color: @white;
                        font-size: 20px;
                        padding: @v - 10 0;
                        transition: all 1100ms linear;
                        // transform: translateX(-50px);
                        // opacity: 0;
                        &:before{
                            content: url(../images/horse.svg);
                            margin-right: @v;
                            width: 20px;
                            display: inline-block;
                        }
                    }
                }
                .more{
                    transition: all 1400ms linear;
                    // transform: translateX(0px);
                    // opacity: 0;
                    margin: 0;
                }
            }
            img{
               width: 100%;
            }
        }
        &.show,
        &.active{
            .item{
                .ban-con{
                    h3,
                    img,
                    li,
                    h5,
                    p,
                    .more,
                    h4 {
                        opacity: 1;
                        transform: translateX(0);
                    }
                }

            }
        }
        .item{
            &.show{
                .ban-con{
                    h3,
                    img,
                    li,
                    h5,
                    p,
                    .more,
                    h4 {
                        // opacity: 0;
                        // transform: translateX(-50px);
                        transition: all 1500ms linear;
                    }
                }
            }
        }
    }
    .owl-dot{
        height:20px !important;
    }
    @media(max-width:767px){        
        .owl-dots{
            position: relative;
            display: block;
            right: 0;
            .owl-dot{
                display: inline-block;
                margin: @v - 10 @v - 18 0;
                &.active{
                    span{
                        background: @base;
                    }
                }
            }
        }
    }
}

// HOME PAGE
.home-container{
    // THREE COLS
    .servs{
        background: @white;
        padding: @v + 10 0;
        @media(max-width:480px){
            padding: @v 0 @v - 10;
        }
        background: #f0f1f1;               
        .serv {
            .item{
                justify-content: center;
                .flex();
                align-items: center;
                height: @v + 80;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                position: relative;
                padding: 0 @v - 10;
                overflow: visible;
                &:before{
                    .con-pos();
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    opacity: 0.8;
                    background: #656565;
                    .ani();
                }
                &:after{
                    .con-pos();
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    border: 1px solid @white;
                    width: 0%;
                    height: 0%;
                    .ani();
                    opacity: 0;
                }
                h6 {
                    font-size: 15px;
                    text-align: center;
                    line-height: 24px;
                    position: relative;
                    z-index: 2;
                    a{
                        color: @white !important;
                        display: block;
                    }
                }
                &:hover{
                    &:before{
                        background: @base;
                    }
                    &:after{
                        opacity: 1;
                        width: 90%;
                        height: 80%;
                    }
                    transform: scale(1.1);
                }
            }
            .owl-stage-outer{
               overflow: visible;
            }
        }
        .owl-dots{
            position: relative;
            display: block;
            right: 0;
            .owl-dot{
                display: inline-block;
                margin: @v - 10 @v - 18 0;
                &.active{
                    span{
                        background: @base;
                    }
                }
            }
        }
       
    }
    // INFO LIST
    .info{padding:0 0 @v + 15;
        .row{
            align-items: center;
            .info-list{
                padding: @v + 15 0 0;
                ul{
                    li{
                        .flex();
                        align-items: center;
                        padding: @v - 18 0;
                        svg{
                            width: 60px;
                            height: 60px;
                            border: 3px solid @blue;
                            border-radius: 100%;
                            padding: @v - 10;
                            path{
                                fill: @blue;
                            }
                        }
                        h2 {
                            font-size: 30px;
                            line-height: 35px;
                            padding-left: @v - 3;
                            color: @blue;
                            font-weight: bold;
                            small{
                                display: block;
                                font-size: 16px;
                                font-weight: 500;
                            }
                        }
                        &:nth-child(2){
                            svg{
                                border-color: #3d4d8d;
                                path{
                                    fill:#3d4d8d;
                                }
                            }
                            h2 {
                                color: #3d4d8d;
                            }
                        }
                        &:last-child{
                            svg{
                                border-color: #6275ae;
                                path{
                                    fill:#6275ae;
                                }
                            }
                            h2 {
                                color: #6275ae;
                            }
                        }
                    }
                }
            }
            .infos{
                .owl-dots{
                    position: relative;
                    display: block;
                    right: 0;
                    .owl-dot{
                        display: inline-block;
                        margin: @v - 10 @v - 18 0;
                        &.active{
                            span{
                                background: @base;
                            }
                        }
                    }
                }
                .item{
                    text-align: center;
                    padding: @v + 15 0 0;
                    svg{
                        height: 110px;
                        margin-bottom: @v;
                        fill: @blue;
                    }
                    h4 {
                        color: @base;
                    }
                    &:hover{
                        svg{
                            fill: @base;
                        }
                        transform: scale(1.1);
                    }
                }
            }
            @media(max-width:500px){
                [class*=col-lg-]{
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%;
                    max-width: 100%;
                }
                .info-list{
                    ul{
                        .flex();
                        justify-content: space-between;
                        li{
                            -ms-flex: 0 0 33%;
                            flex: 0 0 33%;
                            max-width: 33%;
                            display: block;
                            text-align: center;
                            h2 {
                                padding: @v - 10 0 0;
                                font-size: 24px;
                                small{
                                    font-size: 13px;
                                    line-height: normal;
                                }
                            }
                            svg{
                                margin: 0 auto;
                                display: block;
                            }
                            
                        }
                    }
                }
                .infos{                    
                    padding-bottom: @v;
                }
            }
        }
    }
    // TWO COLS
    .two-cols{
        background: url(../images/about.jpg) no-repeat center fixed;
        background-size: cover;
        position: relative;
        &:before{
            background: @white;
            .con-pos();
            opacity: 0.35;
            z-index: 1;
            width: 100%;
            height: 100%;
        }
        .container{
            position: relative;
            z-index: 2;     
            .row{  
                align-items: center;
                @media(max-width:700px){
                    [class*=col-lg-]{
                        -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                        max-width: 100%;
                    }
                }
                .content{
                    background: @white;
                    padding: @v + 20;
                    @media(max-width:767px){
                        padding: @v - 10 @v;
                        .more{
                            margin: 0 0 @v;
                        }
                    }
                    box-shadow: 0 0 5px rgba(0, 0,0,0.3);
                    h2 {
                        line-height: normal;
                        font-weight: 400;
                        font-size: 30px;
                        padding-bottom: @v - 10;
                        color: @base;
                        font-weight: bold;
                        @media(max-width:1199px){
                            font-size: 23px;
                            padding-bottom: 0;
                        }
                        span{
                            display:block;
                            color: @blue;
                            font-weight: 400;
                            font-size: 24px;
                            margin-bottom: @v - 15;
                            @media(max-width:767px){
                                margin: 0;
                            }
                        }
                        strong{
                            display: block;
                            color: @blue;
                        }
                    }
                }
                .col-lg-5{
                   @media(max-width:700px){
                    order: -1;
                   }
                    .img{
                        width: 90%;
                        @media(max-width:700px){
                            width: 70%;
                            margin: @v auto;
                        }
                        margin: 0 auto;
                    }
                }
            }
        }
    }
    // CLIENTS
    .client{
        text-align: center;
        padding: @v + 10 0;
        @media(max-width:767px){
            padding:@v 0;
        }
        h2 {
            padding:0 0 @v;
            color:@base;
            line-height: normal;
            @media(max-width:767px){
            font-size: 24px;
            }
        }
        .clients-wrap{
            background-size: cover;
            padding: @v 0;
            position: relative;
            @media(max-width:767px){
                padding:0;
            }
            &:before{
                background: url(../images/client-bg.png) no-repeat center fixed;
                .con-pos();
                width: 100%;
                height:100%;
                opacity: 0.2;
                left: 0;
                top: 0;
            }
            .clients{
                position: relative;
                z-index: 2;
                .item{
                    background: @white;		
                    img{
                        padding: @v;
                        // -webkit-filter: grayscale(95%);
                        box-shadow: 0 0 10px rgba(0, 0,0,0.1);
                        margin: 10px;
                        // filter: grayscale(95%);
                        width: 94%;
                        .ani();
                        &:hover{
                            // -webkit-filter: grayscale(0%);
                            //     filter: grayscale(0%);
                        }
                    }
                }
            }

        }
         
        .owl-dots{
            position: relative;
            display: block;
            right: 0;
            .owl-dot{
                display: inline-block;
                margin: @v - 10 @v - 18 0;
                &.active{
                    span{
                        background: @base;
                    }
                }
            }
        }
    }
}

// INNERPAGE
.inner-container{
    padding: @v + 20 0;
    @media(max-width:767px){
        padding: @v 0;
    }
    h2 {
        text-align: center;
    }
    // CONTACT
    &.contact{
        background: none;
        border: none;
        padding:@v 0 @v + 6;
        @media(max-width:767px){
            padding-bottom: @v - 10;
        }
        h6 {
            color: @blue;
            font-weight: bold;
            padding: @v 0 0;
        }
        p{
            padding-bottom: 0;
           span{
                color: @txt;
                a{
                    color: @txt;
                }
                strong{
                    color: #231f20;
                    font-weight: bold;
                }
           }
        }
        h2 {
            color: @base;
            text-align: left;
            font-size: 28px;
            font-weight: 600;
            padding-top:30px;
            text-transform:uppercase;
            line-height: normal;
            @media(max-width:767px){
                font-size: 24px;
                text-align: center;
                padding-top: 0;
            }
        }
        form{
            padding-top:0px;
            padding-bottom: 30px;
        }
        input{
            display: inline-block;
            margin: @v - 10 0px;
            @media(max-width:767px){
                margin: 0 0 @v;
                height: 30px;
                line-height: 30px;
            }
            &[type="submit"]{
                width: 145px;
                .ani();
                display: block;
                background: @base;
                font-weight: normal;
                margin: 0  @v - 5 0;
                @media(max-width:767px){
                    margin: @v auto ;
                    height: 45px;
                    line-height: 45px;
                }
                text-transform: capitalize;
                &:hover{
                    background: @blue;
                }
            }
        }
        textarea{
            margin: @v - 10 0px @v - 5;
            @media(max-width:767px){
                margin: 0 0 @v;
            }
        }
        @media(max-width:767px){
            .col-lg-4{
                display: none;
            }
            form{
                padding: 0;
            }
            h6 {
                padding-bottom: 0;
            }
        }
    }
    // ABOUT
    &.about{
        padding-bottom:0;
        @media(max-width:700px){
            .col-sm-5,
            .col-sm-7{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
            .col-sm-5{
                order: -1;
                img{
                    display: block;
                    margin:0 auto 0;
                    @media(max-width:639px){
                        width: 50%;
                    }
                }
            }
        }
        .three-cols{
            padding: @v + 15 0;
            @media(max-width:767px){
                padding: @v 0 0;
            }
            .col-lg-4{                
                .content{
                    background-color: #f0f1f1;
                    padding:@v @v + 10;
                    background-position: center;
                    background-repeat: no-repeat;
                    height: 450px;
                    @media(max-width:767px){
                      padding: @v - 10 @v @v;
                      background-size: 50%;
                      margin-bottom: @v;
                      height: auto;
                    }
                    @media(max-width:500px){
                        height: auto;
                    }
                    h4 {
                        color: @blue;
                        font-size: 22px;
                        font-weight: 600;
                        padding-bottom:@v + 5;
                        text-align: center;
                        position: relative;
                        margin-bottom: @v - 10;
                        @media(max-width:767px){
                           font-size: 18px;
                           line-height: normal;
                        }
                        &:after{
                            .con-pos();
                            left: 0;
                            bottom: 0;
                            width: 93%;
                            height: 1px;
                            background: @blue;
                        }
                        &:before{
                            .con-pos();
                            right: 0;
                            bottom: 5px;
                            width: 93%;
                            height: 1px;
                            background: @blue;
                        }
                    }
                }
                &:first-child{
                    .content{
                        background-image:url(../images/eye.png); 
                    }
                }
                &:nth-child(2){
                    .content{
                        background-image:url(../images/training.png); 
                    }
                }
                &:nth-child(3){
                    .content{
                        background-image:url(../images/business.png); 
                        @media(max-width:767px){
                            height: auto;
                        }
                    }
                }
            }
        }
    }
    // CLIENTS
    &.client {
        padding: @v + 10 0;
        @media(max-width:767px){
            padding: @v - 5 0;
        }
        .img {
            padding: @v + 20;
            @media(max-width:767px){
                padding: @v;
                margin: @v - 5 0;
            }
            background: @white;
            border: 1px solid @bor;
            margin:@v - 5 0;
            img{
                // display: block;
                // -webkit-filter: grayscale(100%);
                //         filter: grayscale(100%);
                // .ani();
                // @media(max-width:767px){
                //     -webkit-filter: grayscale(0%);
                //         filter: grayscale(0%);
                // }
                // &:hover{
                //     opacity: 1;
                //     -webkit-filter: grayscale(0%);
                //         filter: grayscale(0%);
                // }
            }
        }
    }
    // SERVICES
    &.services{
        padding-bottom: @v - 15;
        @media(max-width:767px){
            padding: @v + 10 0;
        }
        h2 {
            padding-bottom: @v + 25;
        }
        p{
            padding: 0 0 @v - 5;
            position: relative;      
            @media(max-width:500px){
               border: 1px solid rgba(0, 0,0,0.1);
               margin-bottom: @v;
               padding: 0;
            }     
            img{
                margin-bottom: @v;
               .sh();
               border-radius: 0;          
               @media(max-width:500px){
                   margin-bottom: -1px;
                   width: 100%;
               } 
            }
            > span{
                position: absolute;    
                display: block;
                left: 0;
                bottom: 35px;
                width: 100%;
                padding:@v @v - 5;
                height: 260px;
                .more{
                    margin-top:@v - 10;
                    display: block;
                    a{
                        background: none;
                        color: @base !important;
                    }
                }
                @media(max-width:767px){
                    height: auto;
                }           
                @media(max-width:500px){
                    position: relative;
                    bottom: 0;
                }     
                &:after{
                    .con-pos();
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background: @white;
                    opacity: 0.9;
                    z-index: 1;
                }
                span{
                    position: relative;
                    z-index: 2;
                }
                strong{
                    display: block;
                    font-size: 16px;
                    @media(max-width:767px){
                        font-size: 14px;
                    }
                    font-weight: 700;
                    color: @blue;
                    margin-bottom: @v - 15;
                    position: relative;
                    z-index: 5;
                    text-align: center;
                    .ani();
                }
            }
            &:hover{
                > span{
                    &:after{
                        .gra();
                    }
                    color: @white;
                    strong{
                        color: @white;
                    }
                    a{
                        
                            color: white !important;
                    }
                }
            }
        }
        @media(max-width:500px){
            .row{
                justify-content: center;
            }
            .col-6{
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
        &.details{
            h3 {
                padding-bottom: @v + 10;
            }
            img{
                margin-bottom: @v - 10;
                @media(min-width:640px){
                    float: left;
                    margin-right: @v;
                    margin-bottom: 0;
                }
            }
            ul{
                padding: 0 0 @v;
            }
        }
    }
}