@import "sub/_variable.scss";
@import "sub/_mixing.scss";

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,700);

/* =========================================================
        General
============================================================ */

body{
    
    font-family         : $font-One;
    font-size           : 16px;
    line-height         : 27px;
    font-weight         : 400;
    color               : #3a3a3a;
    background-color    : #ffffff;
    letter-spacing      : .5px;
    overflow-x          : hidden;

    transition: 1s;

    &.active-bg {
        background: rgba(30, 30, 34, 0.87);
        z-index: 5;
    }
}

html {
   font-family: $font-Two;
}

html,
body {
    width   : 100%;
    height  : 100%;
}


/* ================= Link style ==================== */

a {
    color: $link-color;
}

a,
a > * {
    outline          : none;
    cursor           : pointer;
    text-decoration  : none;
}

a:focus,
a:hover {
    color            : #313131;
    outline          : none;
    text-decoration  : none;
}


/* ================= Transition elements ==================== */
a,
.navbar a,
.form-control {
	@include transition(.5s); 
}



/* =========================================================
        Typography 
============================================================ */

h1, h2, h3, h4, h5, h6{
	font-family 	: $font-One;
	font-weight 	: 400;
	margin 			: 0 0 20px;
}

h1 {
    font-size 		: 48px;
    font-weight     : 700;  
    color           : $white;  
    letter-spacing  : -1px; 

    @media (min-width : 480px) and (max-width : 767px) {font-size: 40px;}

    @media only screen and (max-width: 479px) {font-size: 34px;}
}

h2 {
    font-size 		: 36px;
    line-height     : 40px;
    font-weight     : 600;  
    color           : #403d3e;

    @media (min-width : 480px) and (max-width : 767px) {font-size: 30px;line-height: 35px;}

    @media only screen and (max-width: 479px) {font-size: 25px;line-height: 30px;}
}

h3 {
    font-size 		: 26px;
    line-height     : 30px;
    color           : #1f1842;

    @media only screen and (max-width: 479px) {font-size: 20px;}
}

h4 {
    font-size 		: 25px;
}

h5 {
    font-size 		: 14px;
}

h6 {
    font-size 		: 12px;
}

p img { 
    margin 			: 0; 
}

p {
    margin 			: 0 0 15px;
    line-height 	: 27px;
}

hr {
    margin 			: 0;
}

ul {
    margin 			: 0;
    padding 		: 0;
}

ul li {
    margin 			: 0;
    padding 		: 0;
    list-style 		: none;
}




/* =========================================================
        Button STYLE 
============================================================ */

.btn{
    font-family : $font-Two; 
    font-size   : 20px;
    line-height : 26px;
}

.btn.active, 
.btn:active{
    box-shadow  : none;
}

button,
.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus{
    outline     : none;
}

.btn {
	/*@include transition(.5s); */
}


.btn-default{
    font-size           : 20px;
    color               : $theme-color;
    background-color    : $white;
    border              : 2px solid $theme-color;
    border-radius       : 0;
    padding             : 8px 22px;

    &:hover {
        background: $theme-color;
        color: $white;
    }
}

.btn-default:hover,
.btn-default.focus, 
.btn-default:focus,
.btn-default.active, 
.btn-default:active, 
.open>.dropdown-toggle.btn-default,
.btn-default.active.focus, 
.btn-default.active:focus, 
.btn-default.active:hover, 
.btn-default:active.focus, 
.btn-default:active:focus, 
.btn-default:active:hover, 
.open>.dropdown-toggle.btn-default.focus, 
.open>.dropdown-toggle.btn-default:focus, 
.open>.dropdown-toggle.btn-default:hover,
.open>.dropdown-toggle.btn-primary{
    color               : $white; 
    background-color    : $link-color;
    border-color        : transparent; 
}


.btn-primary{
    position            : relative;
    font-size           : 20px;
    font-weight         : 400;
    border              : 0;
    padding             : 10px 45px;
    border-radius       : 6px;
    z-index             : 5;
    overflow            : hidden;

    background          : $theme-color; 

    }

.btn-primary:hover,
.btn-primary.focus, 
.btn-primary:focus,
.btn-primary.active.focus, 
.btn-primary.active:focus, 
.btn-primary.active:hover, 
.btn-primary:active.focus, 
.btn-primary:active:focus, 
.btn-primary:active:hover, 
.open>.dropdown-toggle.btn-primary.focus, 
.open>.dropdown-toggle.btn-primary:focus, 
.open>.dropdown-toggle.btn-primary:hover{

  
}


.btn-primary.active {
    
}



@media screen and (max-width: 480px){
    .btn-primary{
        font-size: 16px;
        padding  : 8px 25px;
    }
}


@media screen and (max-width: 480px){
    .btn-link{
        font-size: 16px;
        padding  : 8px 25px;
    }
}





/* =========================================================
        Color Presets For Class
============================================================ */

.facebook-bg {
    background-color    : #106ed2; 
}

.twitter-bg {
    background-color    : #3ad0fb; 
}

.linkedin-bg {
    background-color    : #1379bb;
}


/* =========================================================
        Global Classes 
============================================================ */

.no-margin {
    margin      : 0;
}

.no-padding {
    padding     : 0;
}

.section-padding {
    padding     : 115px 0;

    @media only screen and (max-width: 991px) {padding: 90px 0;}

    @media only screen and (max-width: 767px) {padding: 60px 0;}
}

.inline-block{
    display     : inline-block;
}

.ml-30 {margin-left: 30px;}

.mr-30 {margin-right: 30px;}






/* =========================================================
        FORM STYLE 
============================================================ */

.form-control {
	
}
.form-control:focus {
	box-shadow: none;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: transparent;
    background-image: none;
    color: #ffffff;
}

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
textarea, select {
    outline: none;
    margin: 0;
    max-width: 100%;

    -webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -o-border-radius: 0px 0px 0px 0px;
    -ms-border-radius: 0px 0px 0px 0px;
    -khtml-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}



/* =========================================================
        Light-Box STYLE 
============================================================ */

.poptrox-popup {
    background: transparent !important;

    .caption,
    .closer,
    .nav-next,
    .nav-previous {display: none!important;}
}



/* =========================================================
        Pagination STYLE 
============================================================ */

.pagination-wrapper {
    margin-top: 80px;

    @media only screen and (max-width: 991px){margin-top: 0;}

    @media only screen and (max-width: 767px){margin-top: 20px;}

    @media only screen and (max-width: 479px){margin-top: 0;}

    .pagination {
        li {
            
            &.active>a {
                color: $white;
                border-color: $theme-color;
                background-color: $theme-color;

                &:hover ,
                &:focus ,
                &:active {
                    background-color: $theme-color;
                }
            }

            a {
                width: 40px;
                height: 40px;
                line-height: 25px;
                font-weight: 700;
                color: $black;
                border-radius: 0;
                background-color: transparent;
                margin: 0 4px;

                @media only screen and (max-width: 479px) {
                    width: 30px;
                    height: 30px;
                    line-height: 15px;
                    font-size: 12px;
                    margin: 0 2px 5px;
                }
            }
        }
    }

    .pagination>li>a:focus, 
    .pagination>li>a:hover, 
    .pagination>li>span:focus, 
    .pagination>li>span:hover {
        background-color: transparent;
    }
}




/* =========================================================
        Section-Title STYLE 
============================================================ */

.header-title{
    background: url(../images/sub/bg.jpg) no-repeat center top;
    background-size: cover;
    padding: 310px 0 75px;

    margin-top: 100px;

    @media only screen and (max-width: 991px){margin-top: 60px;}

    @media only screen and (max-width: 767px){margin-top: 10px;}

    @media (min-width : 992px) and (max-width : 1199px) {padding: 250px 0 50px;}

    @media only screen and (max-width: 991px){padding: 140px 0 50px;}

    @media only screen and (max-width: 479px){padding: 120px 0 30px;}


    .title{
        font-size: 48px;
        font-weight: 700;
        line-height: 42px;
        color: $white;
        margin-bottom: 10px;

        @media only screen and (max-width: 991px){font-size: 35px;line-height: 35px;}

        @media (min-width : 480px) and (max-width : 767px) {font-size: 30px;line-height: 30px;}

        @media only screen and (max-width: 479px) {font-size: 25px;line-height: 30px;margin-bottom: 0;}
    }

    .sub-title {
        color: $white;
    }
}



/* =========================================================
        Page-Title STYLE 
============================================================ */

.page-title {
    background-color: #dfdbce;
    padding: 18px 0;

    h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1b232f;
        margin: 0;

        span {color: #8e8b81;}
    }
}




/* =========================================================
        Sub-Page-STYLE 
============================================================ */

.sub-page {
    .header-section .navbar{background-color: $white;}

    .header-section .navbar.sticky {background-color: $white;}

    .header-section .navbar .navbar-collapse .navbar-nav li{
        a , .search-view {color: #1b232f;}
    } 

}




/* =========================================================
        Header STYLE 
============================================================ */

.header-section {
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        border-radius: 0;
        border: 0;
        margin: 0;
        min-height: auto;
        background-color: $white;
        box-shadow: 0 0 20px 0px rgba(64, 64, 64, 0.16);
        z-index: 998;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: url(../images/logo-bg.jpg) no-repeat;
            width: 660px;
            height: 90px;
            z-index: 1;

            @media (min-width : 1500px) and (max-width : 1800px) {width: 460px;}

            @media (min-width : 1200px) and (max-width : 1499px) {width: 360px;}

            @media (min-width : 992px) and (max-width : 1199px) {width: 260px;}
        }

        .navbar-header {
            position: relative;
            z-index: 5;
            .navbar-brand {
                padding: 0;
                margin: 0;

                img {padding: 21px 0;}
            }
        }

        &.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: $white;
            box-shadow: 0 0 20px 0px rgba(64, 64, 64, 0.16);
            padding: 0;
            z-index: 998;

            @media (min-width : 768px) and (max-width : 991px) {margin-top: -88px;}

            .navbar-header {
                .navbar-brand {
                    /*img {padding: 10px 0;}*/
                }
            }

            .navbar-collapse {
                .navbar-nav {
                    li {
                        &:hover .dropdown{z-index: 9;}

                        .dropdown {z-index: -1;}

                        /*.search-view {display: none;}*/

                        /*a, .search-view {line-height: 78px;}*/

                        /*.dropdown-menu {top: 78px;}*/

                       /* &.dropdown:hover .dropdown-menu {top: 78px;}*/
                    }
                } 
            }       
        }

        .navbar-collapse {
            padding: 0;

            .navbar-nav {
                li {
                    position: relative;
                    font-size: 16px;
                    font-weight: 400;
                    margin-right: 28px;

                    @media (min-width : 992px) and (max-width : 1199px) {margin-right: 25px;}

                    &:last-child {margin-right: 0;}

                    a, .search-view{
                        color: #959fae;
                        padding: 0;
                        line-height: 100px;

                        &:hover {
                            color: #232f42;
                            background-color: transparent;
                        }
                    }

                    .search-view {cursor: pointer;}



                    &.active {
                        a {
                            color: #232f42;
                            background-color: transparent;
                        }
                    }

                    &.dropdown:hover .dropdown-menu {
                        top: 100px;
                        visibility: visible;
                        opacity: 1;
                        z-index: 1;
                        transform: translateY(0%);
                        transition-delay: 0s, 0s, 0.3s;
                    }

                    .dropdown-menu {
                        top: 100px;
                        left: -50px;
                        min-width: 200px;
                        background-color: $white;
                        padding: 10px 0;
                        display: block;
                        visibility: hidden;
                        opacity: 0;
                        border: 0;
                        transform: translateY(-2em);
                        z-index: -1;
                        transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;

                        li {
                            font-size: 16px;
                            border-bottom: 1px solid rgba(97, 109, 126, 0.12);
                            margin: 0 25px;
                            padding: 0 5px;
                            @include transition(.5s); 

                            &.active {
                                a {
                                    color: #232f42!important;
                                }
                            }

                            &:last-child {border-bottom: 0;}

                            a {
                                font-weight: 600;
                                color: #616d7e !important;
                                line-height: 45px;

                                &:hover {
                                    color: #232f42 !important;
                                }
                            }

                            &:hover .sub-dropdown {
                                opacity: 1;
                                right: -136%;
                            }
                        }

                        .sub-dropdown {
                            position: absolute;
                            top: 0;
                            right: -120%;
                            width: 180px;
                            background-color: $white;
                            opacity: 0;
                            padding: 10px 0;

                            @include transition(.5s); 
                        }
                    }


                    #search-bar {
                        background: rgba(0, 0, 0, 0.99);

                        position: fixed;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        right: 0;
                        visibility: hidden;
                        opacity: 0;
                        z-index: 99;
                        @include transition(.5s);

                        &.active {
                            visibility: visible;
                            opacity: .95;

                            .form-bar {
                                .form-group {
                                    -webkit-transform: scale(1);
                                    -moz-transform: scale(1);
                                    -ms-transform: scale(1);
                                    -o-transform: scale(1);
                                    transform: scale(1);
                                }
                            }
                        }

                        .search-bar {}

                        .close-bar {
                            width: 100%;
                            height: 100%;
                            padding-right: 60px;
                            text-align: right;

                            i {color: $white;font-size: 22px;}
                        }

                        .form-bar {
                            position: relative;
                            width: 50%;
                            top: 50%;
                            margin: -50px auto;

                            .form-group {
                                margin: 0;

                                @include transition(.5s);

                                -webkit-transform: scale(.5);
                                -moz-transform: scale(.5);
                                -ms-transform: scale(.5);
                                -o-transform: scale(.5);
                                transform: scale(.5);

                                .form-control {
                                    font-size: 32px;
                                    color: $white;
                                    background-color: transparent;
                                    border: 0;
                                    border-bottom: 3px solid $white;
                                    box-shadow: none;
                                    height: auto;
                                    padding: 0;
                                }
                            }

                            input[placeholder], [placeholder], *[placeholder] {
                                color: $white !important;
                            }
                        }
                    }

                    .mail {
                        position: relative;

                        i {
                            position: relative;
                            width: 35px;
                            height: 35px;
                            line-height: 35px;
                            text-align: center;
                            color: $white;
                            background-color: $theme-color;
                            border-radius: 50%;
                            z-index: 5;
                        }

                        .effect{
                            position: absolute;
                            top: 62px;
                            left: 30px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            z-index: 1;
                            
                          &:before{
                            content:"";
                            position: absolute;
                            width: 55px;
                            height: 55px;
                            opacity: 0;
                            border-radius: 100%;
                            top: -40px;
                            left: -40px;
                            background: $link-color;
                            animation: effect 3s ease-out infinite;
                          }
                          &:after{
                            content:"";
                            position: absolute;
                            width: 55px;
                            height: 55px;
                            opacity: 0;
                            border-radius: 100%;
                            top: -40px;
                            left: -40px;
                            z-index: 1;
                            background: $link-color;
                            animation: effect 3s 0.8s ease-out infinite;
                          }  
                        }


                        @keyframes effect{
                          0%{
                            opacity: 0;
                            transform: scale(0);
                          }
                          5%{
                            opacity: 1;
                          }
                          100%{
                            opacity: 0;
                          }
                        }
                    }
                }
            } 
        }
    }
}




/* =========================================================
        Slider STYLE 
============================================================ */

.slider-section {
    margin-top: 100px;

    @media only screen and (max-width: 991px){margin-top: 60px;}

    @media only screen and (max-width: 767px){margin-top: 10px;}


    .large-text {
        font-family: $font-One;
        font-size: 48px;
        font-weight: 700;
        line-height: 50px;
        color: $white;

        .break {display: block;}
    }

    .small-text {
        font-size: 16px;
        line-height: 27px;
        color: $white;
        cursor: pointer;

        a {color: $white;}
    }

    .medium-text {
        font-size: 24px;
        color: $white;
        line-height: 30px;
    }

    .link-button {
        .btn {
            border-radius: 25px;

            &.btn-primary {
                font-size: 18px;
                color: $white;
                padding: 10px 35px;
                border-radius: 25px;
                margin-right: 10px;

                &:hover {
                    /*color: #333333;*/
                }
            }
        }
    }
}




/* =========================================================
        Hello-Section-STYLE 
============================================================ */

.hello-section {
    background: url(../images/border.png) no-repeat center;
    background-size: cover;
    padding: 115px 0;

    @media only screen and (max-width: 991px){padding: 90px 0;}

    @media only screen and (max-width: 767px){padding: 80px 0 50px;}

    @media only screen and (max-width: 479px){padding: 70px 0 30px;}

    .content-section {
        padding-top: 200px;

        @media only screen and (max-width: 991px){padding-top: 100px;}

        @media only screen and (max-width: 479px){padding-top: 0;}

        h4 {
            position: relative;
            font-family: $font-One;
            font-size: 60px;
            font-weight: 700;
            color: #403d3e;
            display: inline-block;
            padding-left: 35px;

            @media only screen and (max-width: 479px) {
                font-size: 30px;
                padding-left: 0;
                margin-bottom: 0;
            }

            &::before {
                content: "";
                position: absolute;
                bottom: 12px;
                right: -145px;
                width: 165px;
                height: 5px;
                background-color: $theme-color;
                z-index: 2;

                 @media only screen and (max-width: 479px) {height: 2px;}
            }

            &::after {
                content: "";
                position: absolute;
                width: 215px;
                height: 280px;
                top: -192px;
                left: 0;
                border: 5px solid #403d3e;

                @media only screen and (max-width: 991px){
                    height: 200px;
                    top: -112px;
                }

                @media only screen and (max-width: 479px) {display: none;}
            }
        }

        p {
            font-family: $font-Two;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: -0.5px;
            color: #999;
            padding-left: 65px;
            padding-top: 33px;
            margin-bottom: 25px;

            @media only screen and (max-width: 479px) {
                font-size: 16px;
                line-height: 27px;
                padding: 15px 0 0;
                margin-bottom: 15px;
            }
        }

        h5 {
            font-family: $font-Two;
            font-size: 18px;
            line-height: 27px;
            color: $black;
            padding-left: 65px;

            @media only screen and (max-width: 479px) {
                font-size: 20px;
                line-height: 25px;
                padding-left: 0;
            }
        }
    }


    .parallax-section {
        width: 100%;
        height: 500px;

        .section-caption {
            background: url(../images/hello.png);
            background-position: 50% 0px;
            background-repeat: no-repeat;
            width: 100%;
            height: 800px;
            margin-top: -100px;
        }
    }
}




/* =========================================================
        Project-Section-STYLE 
============================================================ */

.project-section {
    position: relative;
    background: url(../images/border.png) no-repeat center;
    background-size: cover;
    /*background-color: $white;*/

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 200px;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        
    }

    .section-title {
        margin-bottom: 40px;

        @media only screen and (max-width: 479px) {margin-bottom: 30px;}

        h2 {font-weight: 700;}
    }

    .project-carousel {
        .slick-slide {
            margin: 0 15px;

            @media only screen and (max-width: 767px){margin: 0 10px;}

            @media only screen and (max-width: 479px){margin: 0 5px;}
        }

        img {
            width: 100%;
            @include transition(5s);
        }

        .caption {
            position: relative;
            overflow: hidden;

            &:hover {
                .location {
                    &::before {width: 0;}

                    h5 {
                        letter-spacing: 15px;
                        opacity: 0;
                        visibility: hidden;
                    }

                    p {
                        letter-spacing: 5px;
                        opacity: 0;
                        visibility: hidden;
                    }
                }

                .hover-icon {
                    .icon-one {transform: translate(0);}

                    .icon-two {transform: translate(0);}
                }
            }

            .location {
                position: absolute;
                bottom: 55px;
                right: 40px;
                display: none;

                @media only screen and (max-width: 991px){
                    bottom: 30px;
                    right: 30px;
                }

                &::before {
                    content: "";
                    position: absolute;
                    bottom: 80px;
                    right: 0;
                    width: 350px;
                    height: 1px;
                    background: $white;

                    @include transition(1.5s);

                    @media only screen and (max-width: 991px){
                        width: 250px;
                        bottom: 70px;
                    }
                }

                h5 {
                    font-family: $font-One;
                    font-size: 30px;
                    font-weight: 600;
                    color: $white;
                    text-transform: uppercase;
                    margin-bottom: 0;

                    @include transition(1s);

                    @media only screen and (max-width: 991px){font-size: 20px;}
                }

                p {
                    font-family: $font-Two;
                    font-size: 14px;
                    color: $white;
                    margin-bottom: 0;

                    @include transition(1s);
                }
            }

            .hover-icon {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                color: $white;
                font-size: 30px;
                margin: -30px auto 0;
                display: none;

                @media only screen and (max-width: 991px){
                    font-size: 25px;
                    margin: -20px auto 0;
                }

                .icon-one {
                    @include transition(1.5s);

                    transform: translate(-800px);
                }

                .icon-two {
                    @include transition(1.5s);

                    transform: translate(800px);
                }

                .icon-one,
                .icon-two {
                    display: inline-block;

                    a {color: $white;}

                    i {
                        width: 60px;
                        height: 60px;
                        line-height: 52px;
                        border: 4px solid $white;
                        text-align: center;
                        margin: 0 5px;

                        @media only screen and (max-width: 991px){
                            width: 50px;
                            height: 50px;
                            line-height: 42px;
                            border: 3px solid $white;
                        }
                    }
                }
            }
        }

        .slick-center {
            &.caption {
                &:hover img {transform: scale(1.5);}

                .location {
                    display: block;
                    text-align: right;
                }

                .hover-icon {
                    display: block;
                }
            }
        }

        .slick-arrow {

            &.slick-next {
                right: 0;

                &::before {
                    background: url(../images/right-arrow.png) no-repeat;
                    font-size: 42px;
                    color: transparent;
                    opacity: 1;
                    margin-left: -202px;

                    @media only screen and (max-width: 767px){margin-left: -75px;}
                }

                &::after {
                    content: "NEXT";
                    position: absolute;
                    top: 50%;
                    right: 15px;
                    font-size: 22px;
                    color: $white;
                    margin-top: 4px;

                    @media only screen and (max-width: 767px){display: none;}
                }
            }

            &.slick-prev {
                left: 0;
                z-index: 5;

                &::before {
                    background: url(../images/left-arrow.png) no-repeat;
                    font-size: 35px;
                    color: transparent;
                    opacity: 1;
                    margin-left: 90px;

                    @media only screen and (max-width: 767px){margin-left: 25px;}
                }

                &::after {
                    content: "PREV";
                    position: absolute;
                    top: 50%;
                    left: 15px;
                    font-size: 22px;
                    color: $white;
                    margin-top: 4px;

                    @media only screen and (max-width: 767px){display: none;}
                }
            }
        }
    }
}

.color-section {
    padding: 300px 0;
    transition: 1s;

    &.active-color {
        background: #1e1e22;
        transition: 1s;
    }
}


/* =========================================================
        Finding-Section-STYLE 
============================================================ */

.finding-section {
    padding-bottom: 0;

    .find-tab {
        .tab-content {
            .caption {
                img {max-width: 100%;}
            }

            .content {
                h3 {
                    font-size: 36px;
                    line-height: 42px;
                    font-weight: 600;
                    color: #282828;
                    margin-top: 30px;
                    letter-spacing: -.5px;

                    @media only screen and (max-width: 991px){
                        font-size: 35px;
                        line-height: 45px;
                        margin-top: 20px;
                    }

                    @media only screen and (max-width: 767px){
                        font-size: 30px;
                        line-height: 40px;
                    }

                    @media only screen and (max-width: 479px){
                        font-size: 22px;
                        line-height: 30px;
                        margin-top: 10px;
                    }
                }

                p {
                    color: #929292;
                    display: inline-block;

                    @media only screen and (max-width: 991px){
                        font-size: 15px;
                    }
                }

                .button {
                    position: relative;
                    display: inline;
                    overflow: hidden;

                    .btn {
                        position: relative;
                        vertical-align: top;
                        overflow: hidden;

                        @media only screen and (max-width: 991px){
                            font-size: 18px;
                            float: none!important;
                            margin-left: 40px;
                            margin-top: 15px;
                            padding: 6px 15px;
                        }

                        @media only screen and (max-width: 479px){
                            font-size: 16px;
                            float: none !important;
                            margin-left: 20px;
                            margin-top: 10px;
                            padding: 4px 12px;
                        }

                        &:hover {
                            background-color: transparent;
                            color: $theme-color;
                            border-color: $theme-color;

                            .default-text {
                                top: -35px;

                                -webkit-animation-name: hoverInInner;
                                -moz-animation-name: hoverInInner;
                                -o-animation-name: hoverInInner;
                                -ms-animation-name: hoverInInner;
                                animation-name: hoverInInner;
                            }

                            .hover-text {
                                -webkit-animation-name: hoverIn;
                                -moz-animation-name: hoverIn;
                                -o-animation-name: hoverIn;
                                -ms-animation-name: hoverIn;
                                animation-name: hoverIn;
                            }
                        }

                        .default-text {
                            position: relative;
                            z-index: 1;
                            display: inline-block;
                            @include transition(.5s);

                            -webkit-animation: hoverOutInner 0.3s ease 1 forwards;
                            -moz-animation: hoverOutInner 0.3s ease 1 forwards;
                            -o-animation: hoverOutInner 0.3s ease 1 forwards;
                            animation: hoverOutInner 0.3s ease 1 forwards;
                        }

                        .hover-text {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            line-height: 38px;
                            display: block;
                            background-color: $theme-color;
                            color: $white;
                            z-index: 4;

                            -webkit-transform: translate(0, 100%);
                            -moz-transform: translate(0, 100%);
                            -ms-transform: translate(0, 100%);
                            -o-transform: translate(0, 100%);
                            transform: translate(0, 100%);
                            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                            opacity: 0;
                            -webkit-animation: hoverOut 0.3s ease 1 forwards;
                            -moz-animation: hoverOut 0.3s ease 1 forwards;
                            -o-animation: hoverOut 0.3s ease 1 forwards;
                            animation: hoverOut 0.3s ease 1 forwards;
                        }

                        @keyframes hoverOut {

                            0% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                            100% {
                                -webkit-transform: translate(0, -100%);
                                -moz-transform: translate(0, -100%);
                                -ms-transform: translate(0, -100%);
                                -o-transform: translate(0, -100%);
                                transform: translate(0, -100%);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }
                        }


                        @keyframes hoverIn {
                            0% {
                                -webkit-transform: translate(0, 100);
                                -moz-transform: translate(0, 100);
                                -ms-transform: translate(0, 100);
                                -o-transform: translate(0, 100);
                                transform: translate(0, 100);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }

                            100% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                        }

                        @keyframes hoverInInner {
                            0% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }

                            100% {
                                -webkit-transform: translate(0, -30px);
                                -moz-transform: translate(0, -30px);
                                -ms-transform: translate(0, -30px);
                                -o-transform: translate(0, -30px);
                                transform: translate(0, -30px);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                /*opacity: 0;*/
                            }
                        }


                        @keyframes hoverOutInner {
                            0% {
                                -webkit-transform: translate(0, 30px);
                                -moz-transform: translate(0, 30px);
                                -ms-transform: translate(0, 30px);
                                -o-transform: translate(0, 30px);
                                transform: translate(0, 30px);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }

                            100% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        .nav-tabs {
            border: 0;
            text-align: center;
            margin-top: 180px;

            @media only screen and (max-width: 767px){margin-top: 50px;}

            @media only screen and (max-width: 479px){margin-top: 30px;}

            li {
                position: relative;
                float: none;
                display: block;
                margin: 0;

                @media only screen and (max-width: 767px){
                    display: inline-block;
                }

                &.active {
                    a {
                        color: $theme-color;
                        background-color: transparent;
                    }

                    &::before {background-color: $theme-color;}
                }

                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 40px;
                    width: 1px;
                    height: 40px;
                    background-color: #535353;
                    margin: 0 auto;

                    @media only screen and (max-width: 767px){
                        left: auto;
                        top: 20px;
                        right: -20px;
                        width: 40px;
                        height: 1px;
                    }
                }

                &:last-child {
                    &::before {display: none;}
                }

                a {
                    color: #535353;
                    border: 0;
                    margin: 0 0 45px;

                    &:hover {background-color: transparent;}

                    @media only screen and (max-width: 991px){padding: 10px 8px;}
                    
                    @media only screen and (max-width: 767px){
                        padding: 10px 40px;
                        margin: 0;
                    }
                }
            }
        }
    }
}




/* =========================================================
        Awards-Section-STYLE 
============================================================ */

.awards-section {
    .caption {
        img {width: 100%;}
    }

    .wrapper-content {
        position: relative;
        padding: 50px 55px;
        border: 5px solid #403d3e;
        margin-top: 135px;
        margin-left: -80px;

        @media only screen and (max-width: 991px){margin: 30px 0 0 0;}

        @media only screen and (max-width: 767px){padding: 40px 30px;}

        @media only screen and (max-width: 479px){padding: 30px 20px;}

        &::before {
            content: "";
            position: absolute;
            width: 65px;
            height: 75px;
            top: 5px;
            right: 0;
            background: url(../images/awards-logo.png) no-repeat;

            @media only screen and (max-width: 420px) {display: none;}
        }

        h3 {
            font-size: 36px;
            font-weight: 600;
            line-height: 45px;
            color: #403d3e;

            @media only screen and (max-width: 767px){
                font-size: 30px;
                line-height: 35px;
            }

            @media only screen and (max-width: 479px){
                font-size: 25px;
                line-height: 30px;
            }
        }

        p {
            font-size: 18px;
            color: #666666;
            margin-bottom: 25px;

            @media only screen and (max-width: 479px) {margin-bottom: 20px;}
        }

        .link {
            font-size: 20px;
            font-weight: 700;

            @media only screen and (max-width: 479px) {font-size: 16px;}

            i {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
        }

        .border {
            .border-one {
                position: absolute;
                top: -5px;
                left: -5px;
                width: 0;
                height: 5px;
                background-color: $theme-color;

                @include transition(.5s);
            }

            .border-two {
                position: absolute;
                top: -5px;
                right: -5px;
                width: 5px;
                height: 0;
                background-color: $theme-color;

                @include transition(.5s);

                
            }

            .border-three {
                position: absolute;
                bottom: -5px;
                right: -5px;
                width: 0;
                height: 5px;
                background-color: $theme-color;

                @include transition(.5s);
            }

            .border-four {
                position: absolute;
                bottom: -5px;
                left: -5px;
                width: 5px;
                height: 0;
                background-color: $theme-color;

                @include transition(.5s);
            }
        }

        &:hover {
            .border {
                .border-one {width: 101.5%;}

                .border-two {height: 103%;transition-delay: .5s;}

                .border-three {width: 101.5%;transition-delay: 1s;}

                .border-four {height: 103%;transition-delay: 1.5s;}
            }
        }
    }
}



/* =========================================================
        Review-Section-STYLE 
============================================================ */

.review-section {
    position: relative;
    padding-top: 90px;

    &.active-bg {
        h2 {color: #ffffff!important;}
        
        &::before {opacity: 0.9; }
    }

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(../images/review-bg.png) no-repeat 50% 400px;
        background-size: cover;
        z-index: -1;
        transition: 1s;
    }


    @media only screen and (max-width: 991px) { padding: 70px 0 0;}

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

    @media only screen and (max-width: 479px) { padding-top: 30px;}


    .section-title {
        margin-bottom: 100px;

        @media only screen and (max-width: 991px){margin-bottom: 50px;}

        @media only screen and (max-width: 767px){margin-bottom: 30px;}

        @media only screen and (max-width: 479px){margin-bottom: 20px;}

        h2 {
            color: #282828;

            /*@media only screen and (max-width: 767px){color: #eee;}*/
        }
    }

    .review-wrapper {
        margin-bottom: 80px;

        &.last-wrapper {margin-bottom: 0;}

        @media only screen and (max-width: 991px){margin-bottom: 10px;}

        .contact-wrapper {
            position: relative;
            background-color: $white;
            border-radius: 5px;
            padding: 35px;
            margin: 0 50px 0 90px;

            @media only screen and (max-width: 991px) {
                padding-top: 0;
            }

            @media only screen and (max-width: 479px) {
                margin: 0 0 0 70px;
                padding: 0 20px 20px;
            }

            @media only screen and (max-width: 399px) {
                margin: 0 0 0 75px;
            }

            &:last-wrapper {margin-bottom: 0;}

            &::before {
                content: "";
                position: absolute;
                top: 45px;
                left: -10px;
                border-right: 10px solid $white;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
            }

            p {
                color: #666666;
            }

            h5 {
                font-family: $font-One;
                font-size: 20px;
                font-weight: 600;
                color: #403d3e;
                margin: 20px 0 0;
            }

            .position {
                font-family: $font-One;
                font-size: 14px;
                font-weight: 600;
                color: #999999;
            }
        }
    }
}



/* =========================================================
        News-Section  STYLE 
============================================================ */

.news-section {
    background: url(../images/news-bg.jpg) no-repeat center;
    background-size: cover;

    @media only screen and (max-width: 991px){padding-bottom: 50px;}

    @media only screen and (max-width: 479px){padding-bottom: 30px;}

    .section-title {
        margin-bottom: 30px;
    }

    .wrapper-container {
        .news-wrapper {
            background-color: $white;
            border-radius: 5px;
            border: 1px solid #eee;
            @include transition(.5s);

            @media only screen and (max-width: 991px){margin-bottom: 50px;}

            @media only screen and (max-width: 479px){margin-bottom: 30px;}

            &.last-wrapper {margin-bottom: 0;}

            &:hover {
                box-shadow: 0 0 35px #e3e7ea;


                .caption img{
                    opacity: 0;
                    visibility: hidden;

                    @media only screen and (max-width: 767px){
                        opacity: 1;
                        visibility: visible;
                    }
                }

                .news-content {
                    .default-content {
                        opacity: 0;
                        visibility: hidden;

                        @media only screen and (max-width: 767px){
                            opacity: 1;
                            visibility: visible;
                        }
                    }

                    .hover-content {
                        opacity: 1;
                        visibility: visible;

                        @media only screen and (max-width: 767px){
                            opacity: 0;
                            visibility: hidden;
                        }
                    }
                }
            }

            .news-header {
                padding: 15px 20px 24px;

                .person {
                    img {
                        width: 40px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }

                .title {
                    font-size: 13px;
                    font-weight: 700;
                    line-height: 7px;
                    color: #000;
                    vertical-align: sub;
                }

                .post {
                    font-size: 13px;
                    line-height: 15px;
                    color: #a9a7a7;
                    margin-top: 5px;

                    a {
                        color: #a9a7a7;

                        &:hover {color: $theme-color;}
                    }

                    .read {
                        display: block;
                    }
                }
            }

            .caption {
                overflow: hidden;

                img {
                    width: 100%;
                    opacity: 1;
                    visibility: visible;

                    @include transition(.5s);
                }
            }

            .news-content {
                padding: 25px;
                @include transition(.5s);

                .default-content {@include transition(.5s);}

                h4 {
                    font-family: $font-One;
                    font-weight: 600;
                    margin-bottom: 0;

                    @include transition(.5s);

                    @media only screen and (max-width: 479px) {font-size: 20px;}
                }

                .date {
                    font-size: 15px;
                    line-height: 35px;
                    color: #adadad;

                    @include transition(.5s);
                }

                p {
                    font-size: 14px;
                    line-height: 25px;
                    letter-spacing: 0;

                    @include transition(.5s);
                }

                .btn {
                    background: transparent;
                    border: 2px solid #e2e2e2;
                    color: #6f6f6f;
                    font-size: 16px;
                    padding: 6px 30px;
                    margin-top: 25px;
                    border-radius: 25px;

                    &:hover {
                        background: $theme-color;
                        border-color: $theme-color;
                        color: $white;
                    }

                    @media only screen and (max-width: 767px){
                        font-size: 14px;
                        padding: 5px 25px;
                        margin-top: 10px;
                    }

                    @media only screen and (max-width: 767px){
                        font-size: 13px;
                        padding: 4px 22px;
                        margin-top: 10px;
                    }
                }


                .hover-content {
                    position: absolute;
                    left: 40px;
                    right: 40px;
                    top: 85px;
                    opacity: 0;
                    visibility: hidden;

                    @include transition(.5s);

                    @media (min-width : 992px) and (max-width : 1199px) {
                        p {
                            &.last {display: none;}
                        }
                    }

                    @media (min-width : 768px) and (max-width : 991px) {
                        p {
                            &.first {display: none;}
                        }
                    }
                }
            }
        }
    }
}



/* =========================================================
        Client-Section STYLE 
============================================================ */

.client-section {
    padding: 0 0 80px;
    background: $white;

    @media only screen and (max-width: 767px){padding: 0 0 50px;}

    @media only screen and (max-width: 479px){padding: 0 0 30px;}

    .client-carousel {
        img {width: auto;margin: 0 auto;}
    }
}




/* =========================================================
        Google-Map STYLE 
============================================================ */

.map-section {
    #googleMap {
        width: 100%;
        height: 520px;

        @media only screen and (min-width: 1500px) {height: 650px;}

        @media only screen and (max-width: 767px) {height: 400px;}

        @media only screen and (max-width: 479px) {height: 300px;}

    }
}




/* =========================================================
        Testimonial-Section STYLE 
============================================================ */

.testimonial-section {
    background: url(../images/rular.png) no-repeat 50% 100%;

    .section-title {
        margin-bottom: 70px;

        @media only screen and (max-width: 991px){margin-bottom: 50px;}

        @media only screen and (max-width: 767px){margin-bottom: 30px;}

        @media only screen and (max-width: 479px){margin-bottom: 20px;}
    }

    #testimonial-carousel {
        padding-bottom: 30px;

        @media only screen and (max-width: 991px){padding-bottom: 55px;}

        @media only screen and (max-width: 767px){padding-bottom: 40px;}

        .carousel-indicators {
            width: 100%;
            bottom: -15px;
            left: 0;
            right: 0;
            margin: 0 auto;

            li {
                width: 15px;
                height: 15px;
                border: 0;
                background-color: #c0c0c0;
                margin: 0 3px;

                &.active {
                    background-color: $theme-color;
                }
            }
        }

        .carousel-inner {
            padding-bottom: 15px;

            .carousel-wrapper {
                position: relative;
                box-shadow: 0px 0px 25px #e6e4e4;
                background-color: $white;
                border-radius: 15px;
                padding: 48px 45px 32px;
                margin: 10px 20px 40px;
                z-index: 5;

                @media only screen and (max-width: 991px){padding: 48px 20px 32px;}

                @media only screen and (max-width: 767px){margin: 30px 15px 0;padding: 48px 40px 32px;}

                @media only screen and (max-width: 479px){padding: 48px 20px 32px;}

                &::before {
                    content: "";
                    position: absolute;
                    top: 35px;
                    right: -16px;
                    width: 100%;
                    height: 100%;
                    border: 1px solid $theme-color;
                    border-radius: 10px;
                    z-index: -1;

                    @media only screen and (max-width: 767px){display: none;}
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    background-color: $white;
                }

                .carousel-image {
                    img {
                        position: relative;
                        border-radius: 50px;
                        width: 38px;
                        height: 38px;
                        margin-right: 15px;
                        z-index: 5;
                    }
                }

                h3 {
                    position: relative;
                    font-size: 36px;
                    font-weight: 600;
                    line-height: 30px;
                    color: $white;
                    margin-bottom: 20px;
                    z-index: 5;

                    @media only screen and (max-width: 991px){font-size: 30px;margin-bottom: 15px;}

                    @media only screen and (max-width: 767px){font-size: 25px;margin-bottom: 10px;}
                }

                p {
                    position: relative;
                    font-size: 16px;
                    line-height: 24px;
                    color: #666666;
                    margin-bottom: 22px;
                    z-index: 5;

                    @media only screen and (max-width: 767px){margin-bottom: 15px;}
                }

                .title {
                    position: relative;
                    font-size: 18px;
                    font-weight: 500;
                    color: #403d3e;
                    z-index: 5;

                    @media only screen and (max-width: 767px){font-size: 16px;}
                }

                .position {
                    position: relative;
                    font-size: 14px;
                    line-height: 10px;
                    display: block;
                    color: #999999;
                    z-index: 5;
                }
            }
        }

        .carousel-control {
            &.left,
            &.right {
                background-image: none;
                width: 50px;
                height: 50px;
                opacity: 1;
                text-shadow: none;
                top: 30%;

                i {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    color: $theme-color;
                    border: 1px solid $theme-color;
                    border-radius: 50%;
                    text-align: center;
                    @include transition(.5s);

                    &:hover {
                        background-color: $theme-color;
                        color: $white;
                    }
                }
            }

            &.left {    
                left: -50px;
            }

            &.right {
                right: -65px;
            }
        }
    }
}




/* =========================================================
        Pro-Section STYLE 
============================================================ */

.pro-section {
    .wrapper-content {
        h3 {
            position: relative;
            font-family: $font-One;
            font-size: 36px;
            font-weight: 700;
            line-height: 45px;
            color: #3f4c5d;
            margin-bottom: 50px;

            .color {color: $theme-color;}

            &::before {
                content: "";
                position: absolute;
                width: 195px;
                height: 1px;
                bottom: -20px;
                left: 0;
                background-color: $theme-color;
            }

            @media (min-width : 992px) and (max-width : 1199px) {
                font-size: 30px;
                line-height: 40px;
            }

            @media only screen and (max-width: 767px){
                font-size: 30px;
                line-height: 40px;
            }

            @media only screen and (max-width: 479px){
                font-size: 25px;
                line-height: 30px;
            }
        }

        .text-content {
            margin-left: 125px;
            margin-top: 80px;

            @media (min-width : 992px) and (max-width : 1199px) {
                margin-left: 30px;
                margin-top: 65px;
            }

            @media only screen and (max-width: 991px){margin-top: 80px;}

            @media only screen and (max-width: 767px){margin: 60px 0 0 60px;}

            @media only screen and (max-width: 479px){margin: 60px 0 0 0;}

            li {
                font-size: 18px;
                margin-bottom: 25px;

                @media only screen and (max-width: 767px){margin-bottom: 15px;}

                @media only screen and (max-width: 479px){font-size: 15px;}

                .digit {
                    color: $theme-color;
                }

                p {
                    color: #3f4c5d;
                    padding: 1px 0 0 56px;

                    @media only screen and (max-width: 479px) {padding: 1px 0 0 30px;}
                }
            }
        }
    }


    

    .caption {
        position: relative;
        margin-top: 130px;

        @media only screen and (max-width: 767px){margin-top: 60px;}

        @media only screen and (max-width: 479px){margin-top: 40px;}

        &::before {
            content: "";
            position: absolute;
            top: -68px;
            right: -60px;
            width: 408px;
            height: 410px;
            background: url(../images/shap.png) no-repeat;

            @media only screen and (max-width: 767px){display: none;}
        }

        img {
            position: relative;
            width: 100%;
            z-index: 5;
        }
    }
}



/* =========================================================
        Team-Section STYLE 
============================================================ */

.team-section {
    .section-title {
        margin-bottom: 45px;

        h2 {
            color: #3f4c5d;

            @media only screen and (max-width: 479px) {margin-bottom: 10px;}
        }

        p {color: #828890;}
    }


    .team-wrapper {
        margin-bottom: 45px;

        &:hover {
            .caption {
                .hover-view {
                    visibility: visible;
                    opacity: 1;

                    .icon {
                        &.icon-one {
                            i {transform: translateX(30px);}
                        }

                        &.icon-two {

                            i {transform: translateX(-30px);}
                        }

                        i {
                            visibility: visible;
                            opacity: 1;
                        }
                    }
                }
            }


            .author {
                &::before {width: 100%;}
            }
        }

        .caption {
            position: relative;
            overflow: hidden;

            img {width: 100%;}

            .hover-view {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(40, 104, 201, 0.73);
                opacity: 0;
                visibility: hidden;

                @include transition(.5s);

                .icon {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    margin: -20px auto 0;

                    &.icon-one {
                        i {transform: translateX(300px);}
                    }

                    &.icon-two {
                        i {transform: translateX(-300px);}
                    }

                    i {
                        width: 50px;
                        height: 50px;
                        line-height: 48px;
                        font-size: 22px;
                        color: $white;
                        border: 1px solid $white;
                        border-radius: 50%;
                        visibility: hidden;
                        opacity: 0;

                        @include transition(.5s);

                        &:hover {color: #313131;}
                    }
                }
            }
        }

        
        .author {
            position: relative;
            padding: 22px 0 13px;
            border-bottom: 1px solid #bcbdbf;


            &::before {
                content: "";
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 0;
                height: 1px;
                background-color: $theme-color;

                @include transition(.5s);
            }

            .title {
                font-family: $font-One;
                font-weight: 700;
                font-size: 24px;
                line-height: 30px;
                display: block;

                a {
                    color: #3f4c5d;

                    &:hover {color: $theme-color;}
                }

                @media only screen and (max-width: 479px) {
                    font-size: 20px;
                    line-height: 25px;
                }
            }

            .position {
                font-weight: 500;
                color: #3f4c5d;
            }
        }
    }
}



/* =========================================================
        Gallery-Section STYLE 
============================================================ */

.gallery-section {
    .portfolio {
        .portfolio-sorting {
            margin: 0 0 45px;

            li {
                font-size: 20px;
                font-weight: 600;

                a {
                    color: #313131;

                    &:hover {color: $theme-color;}

                    &.active {color: $theme-color;}
                }
            }
        }

        .gallery-wrapper {
            .portfolio-items {
                .portfolio-item {
                    position: relative;
                    margin-bottom: 30px;
                    overflow: hidden;

                    img {width: 100%;}

                    &:hover {
                        .hover-view {
                            visibility: visible;
                            opacity: 1;

                            i {transform: scale(1);}
                        }
                    }

                    .hover-view {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(40, 104, 201, 0.68);
                        visibility: hidden;
                        opacity: 0;
                        z-index: 1;

                        @include transition(.5s);

                        i {
                            position: relative;
                            top: 45%;
                            font-size: 25px;
                            color: $white;
                            margin-top: -10px;
                            z-index: 5;

                            @include transition(.5s);

                            transform: scale(.5);
                        }
                    }
                }
            }
        }
    }
}



/* =========================================================
        Gallery-Section STYLE 
============================================================ */

.project-detail-section {
    .project-wrapper {
        position: relative;

        #project-carousel {
            margin-top: 100px;

            @media only screen and (min-width: 1500px){
                height: 800px;
                overflow: hidden;
            }

            @media (min-width : 992px) and (max-width : 1499px) {
                .carousel-inner {
                    height: 800px;

                    .item,
                    .item img{
                        height: 100%;
                    }
                }
            }

            @media only screen and (max-width: 991px){margin-top: 70px;}

            @media only screen and (max-width: 767px){margin-top: 30px;}

            .carousel-inner {
                .item {transition-property: opacity;}
        
                .item,
                .active.left,
                .active.right {opacity: 0;}

                .active,
                .next.left,
                .prev.right {opacity: 1;}

                .next,
                .prev,
                .active.left,
                .active.right {left: 0;transform: translate3d(0, 0, 0);}


                .item {
                    img {width: 100%;}
                }
            }

            .carousel-control {
                &.left,
                &.right {
                    background-image: none;
                    width: 100px;
                    height: 80px;
                    opacity: 1;
                    top: 50%;
                    margin-top: -50px;

                    @media only screen and (max-width: 991px){width: 50px;}

                    @media only screen and (max-width: 767px){
                        margin-top: -30px;

                        img {width: 40px;}
                    }
                }

                &.left {}

                &.right {
                    @media only screen and (max-width: 991px) {right: 20px;}
                }
            }
        }

        .wrapper-contant {
            position: absolute;
            top: 8%;
            right: 15%;
            background-color: $white;
            width: 500px;
            padding: 55px 50px;

            @media only screen and (max-width: 991px){
                position: relative;
                width: 100%;
                left: 0;
                right: 0;
                padding: 40px 30px;
            }


            @media only screen and (max-width: 767px){
              
                padding: 20px 15px;
            }

            .small-text {
                font-size: 16px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1.5px;

                a {
                    color: $black;

                    &:hover {color: $theme-color;}
                }
            }

            h3 {
                font-size: 35px;
                font-weight: 700;
                line-height: 40px;
                color: $black;
                margin: 35px 0 25px;

                @media only screen and (max-width: 991px){
                    font-size: 30px;
                    line-height: 35px;
                    margin: 10px 0;
                }

                @media only screen and (max-width: 479px){
                    font-size: 25px;
                    line-height: 30px;
                }
            }

            p {
                color: #666;
                font-weight: 500;
            }

            .project-detail {
                margin: 40px 0 60px;

                @media only screen and (max-width: 991px) {margin: 20px 0;}
                
                @media only screen and (max-width: 479px) {margin: 30px 0 40px;}

                li {
                    color: $black;
                    font-weight: 600;
                    border-bottom: 1px solid #e8e8e8;
                    line-height: 45px;

                    &:last-child {border: 0;}

                    .text {font-weight: 400;}
                }
            }

            .social-share {
                .text {
                    color: $black;
                    font-weight: 500;
                    letter-spacing: 1px;
                }

                .social-icon {
                    li {
                        display: inline-block;
                        margin-right: 20px;

                        &:last-child {margin-right: 0;}

                        i {
                            font-size: 20px;
                            color: $black;
                            @include transition(.5s);

                            &:hover {color: $theme-color;}
                        }
                    }
                }
            }
        }
    }
}




/* =========================================================
        Video-Section STYLE 
============================================================ */

.video-section {
    .video-overlay {
        video {width: 100%;}
    }
}




/* =========================================================
        Contact-Section STYLE 
============================================================ */

.contact-section {
    background: $white;

    .right-padding {
        padding-right: 7px;
    }

    .left-padding {
        padding-left: 7px;
    }

    .footer-section {
        .footer-wrapper {
            padding: 80px 35px;

            @media (min-width : 992px) and (max-width : 1199px) {padding: 80px 15px;}

            @media only screen and (max-width: 991px){padding: 50px 35px;}

            @media only screen and (max-width: 600px){padding: 50px 0;}

            .footer-menu li {
                margin-right: 40px;

                @media (min-width : 992px) and (max-width : 1199px) {margin-right: 15px;}
            }
        }
    }

    .contact-bar {
        img {width: 100%;}

        .wrapper-content {
            padding: 30px 15px 0;

            h4 {
                font-family: $font-One;
                font-size: 24px;
                font-weight: 600;
                margin-bottom: 8px;

                @media (min-width : 992px) and (max-width : 1199px) {font-size: 20px;}
            }

            p {
                font-size: 14px;
                letter-spacing: .5px;
                color: #828282;
            }

            ul {
                margin-top: 35px;

                li {
                    margin-bottom: 18px;

                    i {
                        font-size: 20px;
                        color: $theme-color;
                        float: left;
                        margin-top: 7px;
                    }

                    .content {
                        display: inline-block;
                        font-weight: 600;
                        margin-left: 19px;

                        @media (min-width : 992px) and (max-width : 1199px) {
                            font-size: 15px;
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
}




/* =========================================================
        Contact-icon-Section STYLE 
============================================================ */

.contact-icon-section {
    .contact-wrapper {

        &.last-wrapper {margin-bottom: 0;}

        @media only screen and (max-width: 767px){margin-bottom: 50px;}

        @media only screen and (max-width: 479px){margin-bottom: 30px;}

        i {
            font-size: 30px;
            color: $theme-color;
        }

        h4 {
            font-size: 30px;
            font-weight: 700;
            margin: 20px 0;

            @media only screen and (max-width: 767px){font-size: 25px;margin: 10px 0;}

            @media only screen and (max-width: 479px){font-size: 20px;}
        }

        p {
            color: #847f7f;
            margin-bottom: 0;
        }
    }
}




/* =========================================================
        Footer STYLE 
============================================================ */

.footer-section {
	background: $theme-color;

	.footer-wrapper {
        padding: 80px 0;

        @media (min-width : 768px) and (max-width : 1199px) {padding: 50px 0;}

        @media only screen and (max-width: 767px) {padding: 30px 0;}

		.footer-logo {
			margin-left: -5px;

            @media only screen and (max-width: 767px){
                display: block;
                text-align: center;
            }
		}

        .footer-menu {
            
            @media only screen and (max-width: 767px){
                float: none!important;
                text-align: center;
                margin-top: 20px;
            }

            li {
                display: inline-block;
                margin-right: 65px;

                @media (min-width : 992px) and (max-width : 1199px) {margin-right: 40px;}

                @media (min-width : 768px) and (max-width : 991px) {margin-right: 20px;}

                @media only screen and (max-width: 767px){margin-right: 15px;}

                &:last-child {

                    @media only screen and (max-width: 991px) {margin-right: 0;}
                }

                a {
                    color: $white;
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 50px;

                    &:hover {
                        color: #313131;
                    }

                    @media only screen and (max-width: 767px){
                        font-size: 16px;
                        line-height: 30px;
                    }

                    @media only screen and (max-width: 479px) {font-weight: 400;}
                }
            }
        }
	}
}




/* =========================================================
        Home-Page-Two-STYLE 
============================================================ */

.homePageTwo {
    .slider-section {

        position: relative;
        left: 50px;

        margin-left: 100px!important;
        padding-left: 100px!important;

        .tp-banner-container {
            /*width: 100%!important;
            left: 0!important;
            right: 0!important;
            margin: 0 auto!important;*/
        }
    }

    .project-section {background: $white;}
}




/* =========================================================
        Home-Page-Three-STYLE 
============================================================ */

.homePageThree {
    .slider-section {
        position: relative;
        margin-top: 0;

        @media only screen and (max-width: 991px){overflow-y: hidden;}

        .logo {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            z-index: 99;

            @media only screen and (max-width: 991px){
                img {width: 75%;}
            }

            @media only screen and (max-width: 767px){
                img {width: 55%;}
            }

            @media only screen and (max-width: 479px){
                img {width: 40%;}
            }
        }


        .menu-search {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 21;

            &.action {z-index: 999;}

            .open-menu {
                position: absolute;
                left: 0;
                width: 115px;
                height: 110px;
                color: #fcfcfc;
                background-color: #191a1c;
                text-align: center;
                cursor: pointer;

                img {margin-top: 40px;}

                @media only screen and (max-width: 991px){
                    left: 0;
                    width: 90px;
                    height: 84px;

                    img {margin-top: 28px;}
                }
            }


            .search-view {
                .open-bar {
                    position: absolute;
                    top: 50px;
                    right: 150px;
                    font-size: 20px;
                    color: $white;
                    cursor: pointer;
                }

                #search-bar {
                    background: rgba(0, 0, 0, 0.97);

                    position: fixed;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    right: 0;
                    visibility: hidden;
                    opacity: 0;
                    z-index: 99;
                    @include transition(.5s);

                    &.active {
                        visibility: visible;
                        opacity: .98;

                        .form-bar {
                            .form-group {
                                -webkit-transform: scale(1);
                                -moz-transform: scale(1);
                                -ms-transform: scale(1);
                                -o-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                    }

                    .search-bar {}

                    .close-bar {
                        width: 100%;
                        height: 100%;
                        padding: 50px 148px;
                        text-align: right;
                        cursor: pointer;

                        i {color: $white;font-size: 22px;}
                    }

                    .form-bar {
                        position: relative;
                        width: 50%;
                        top: 50%;
                        margin: -50px auto;

                        .form-group {
                            margin: 0;

                            @include transition(.5s);

                            -webkit-transform: scale(.5);
                            -moz-transform: scale(.5);
                            -ms-transform: scale(.5);
                            -o-transform: scale(.5);
                            transform: scale(.5);

                            .form-control {
                                font-size: 32px;
                                color: $white;
                                background-color: transparent;
                                border: 0;
                                border-bottom: 3px solid $white;
                                box-shadow: none;
                                height: auto;
                                padding: 0;
                            }
                        }

                        input[placeholder], [placeholder], *[placeholder] {
                            color: $white !important;
                        }
                    }
                }
            }

            #burger-menu {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.97);
                -webkit-transform: translateX(-110%);
                -moz-transform: translateX(-110%);
                -ms-transform: translateX(-110%);
                -o-transform: translateX(-110%);
                transform: translateX(-110%);

                @include transition(.8s);

                &.active {
                    -webkit-transform: translateX(0);
                    -moz-transform: translateX(0);
                    -ms-transform: translateX(0);
                    -o-transform: translateX(0);
                    transform: translateX(0);

                    .menu-bar {
                        li {
                            visibility: visible;
                            opacity: 1;
                            transition-delay: .5s;
                            transform: translateX(0)!important;
                        }
                    }

                    .social-bar {
                        width: 240px;

                        .social-icon {
                            li {
                                visibility: visible;
                            }
                        }
                    }
                }

                .close-menu {
                    position: absolute;
                    left: 50px;
                    top: 50px;
                    font-size: 20px;
                    margin: 0 40px;
                    line-height: 110px;
                    color: $white;
                    cursor: pointer;
                }

                .menu-bar {
                    display: inline-block;
                    margin-left: 180px;
                    margin-top: 100px;

                    li {
                        position: relative;
                        font-size: 50px;
                        line-height: 60px;
                        font-weight: 700;
                        visibility: hidden;
                        opacity: 0;

                        @include transition(1s);

                        &:nth-child(2) {transform: translateX(-85px);}

                        &:nth-child(3) {transform: translateX(-190px);}

                        &:nth-child(4) {transform: translateX(-280px);}

                        &:nth-child(5) {transform: translateX(-295px);}

                        &:nth-child(6) {transform: translateX(-315px);}

                        &:nth-child(7) {transform: translateX(-325px);}

                        &:nth-child(8) {transform: translateX(-340px);}

                        a {
                            position: relative;
                            color: $white;

                            @include transition(.8s);

                            &::before {
                                content: "";
                                position: absolute;
                                left: -30%;
                                top: 30px;
                                width: 100%;
                                height: 1px;
                                background-color: #eee;
                                visibility: hidden;
                                opacity: 0;
                                z-index: -1;

                                @include transition(.8s);
                            }

                            
                        }

                        &:hover a{
                            color: $theme-color;

                            &::before {
                                left: 0;
                                visibility: visible;
                                opacity: 1;
                            }


                        }

                        &.extra-menu {
                            &:hover {
                                .sub-menu {
                                    visibility: visible;
                                    opacity: 1;
                                    transform: translateX(0);

                                    li a{
                                        color: $white;

                                        &::before {
                                            visibility: hidden;
                                            opacity: 0;
                                        }
                                    }
                                }
                            }
                        }

                        .sub-menu {
                            position: absolute;
                            top: 10px;
                            right: -150px;
                            padding: 0 25px;
                            visibility: hidden;
                            opacity: 0;
                            transform: translateX(100px);

                            @include transition(.5s);

                            li a::before {top: 10px;}

                            li {
                                font-size: 18px;
                                font-weight: 500;
                                line-height: 32px;

                                &:nth-child(2) {transform: translateX(0);}

                                &:nth-child(3) {transform: translateX(0);}

                                &:nth-child(4) {transform: translateX(0);}

                                &:nth-child(5) {transform: translateX(0);}

                                a {
                                    &.active {color: $theme-color!important;}

                                    &:hover {
                                        color: $theme-color!important;

                                        &::before {
                                            visibility: visible!important;
                                            opacity: 1!important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .social-bar {
                    width: 550px;
                    height: 100%;
                    background-color: rgb(14, 14, 14);
                    text-align: center;
                    transition-delay: .5s;

                    @include transition(1s);

                    .social-icon {
                        margin-top: 120px;

                        li {
                            margin-bottom: 20px;
                            visibility: hidden;

                            @include transition(3s);

                            a {
                                color: $white;

                                &:hover {color: $theme-color;}

                                i {
                                    font-size: 25px;
                                }
                            }
                        }
                    }

                    .link {
                        position: absolute;
                        right: 80px;
                        bottom: 100px;
                        display: inline-block;
                        transform: rotate(-90deg);
                        font-size: 20px;
                        font-weight: 500;

                        a {
                            color: $white;
                        }
                    }
                }
            }
        }


        .arrow-left,
        .arrow-right {
            position: absolute;
            bottom: 4vh;
            cursor: pointer;
            z-index: 22;

            width: 80px;
            height: 80px;
            line-height: 88px;
            text-align: center;
            display: inline-block;
            border: 3px solid $white;

            &.active {
                z-index: 0;
            }

            @media only screen and (max-width: 991px){
                width: 70px;
                height: 70px;
            }

            @media only screen and (max-width: 767px){
                width: 60px;
                height: 60px;
                line-height: 72px;
            }

            @media only screen and (max-width: 479px){
                width: 50px;
                height: 50px;
                line-height: 62px;
            }

            @media only screen and (max-width: 399px) {
                border: 2px solid $white;
            }


            &::before {
                content: '';
                width: 35px;
                height: 30px;
                display: inline-block;

                @media only screen and (max-width: 479px) {
                    background-size: 18px;
                }
            }
        }


        .arrow-left {
            left: 22vmin;
            top: auto;
            bottom: 45px;

            &::before {
                background: url(../images/prev.png) 45% no-repeat;
            }
        }

        .arrow-right {
            left: 36vmin;
            right: auto;
            top: auto;
            bottom: 45px;

            &::before {
                background: url(../images/next.png) 45% no-repeat;
            }

            @media only screen and (min-width: 1500px) {left: 32vmin;}
        }
    }
}




/* =========================================================
        About-Page-STYLE 
============================================================ */

.aboutPage {
    .header-title {
        padding: 230px 0;

        @media only screen and (max-width: 1400px) {padding: 200px 0;}

        @media only screen and (max-width: 991px) {padding: 150px 0;}

        @media only screen and (max-width: 767px) {padding: 130px 0;}

        @media only screen and (max-width: 479px) {padding: 100px 0;}

        .title {
            position: relative;
            color: #3f4c5d;
            transform: rotate(90deg);
            display: inline-block;

            @media only screen and (max-width: 991px){color: $white;}

            &:before {
                content: "";
                position: absolute;
                bottom: -95px;
                right: 0;
                left: 0;
                width: 200px;
                height: 1px;
                background-color: #2868c9;
                transform: rotate(-90deg);
                margin: 0 auto;

                @media only screen and (max-width: 991px){display: none;}
            }
        }
    }

    .team-section {
        padding-bottom: 0;
    }
}




/* =========================================================
        Gallery-Page-STYLE 
============================================================ */

.galleryPage {
    .header-title {
        background: url(../images/sub/gallery-bg.jpg) center no-repeat;
        background-size: cover;
        padding: 230px 0;

        @media only screen and (max-width: 1400px) {padding: 200px 0;}

        @media only screen and (max-width: 991px) {padding: 150px 0;}

        @media only screen and (max-width: 767px) {padding: 130px 0;}

        @media only screen and (max-width: 479px) {padding: 100px 0;}

        .title {
            position: relative;
            color: #3f4c5d;
            transform: rotate(90deg);
            display: inline-block;

            @media only screen and (max-width: 479px) {color: $white;}

            &:before {
                content: "";
                position: absolute;
                bottom: -95px;
                right: 0;
                left: 0;
                width: 200px;
                height: 1px;
                background-color: #2868c9;
                transform: rotate(-90deg);
                margin: 0 auto;

                @media only screen and (max-width: 991px){display: none;}
            }
        }
    }
}



/* =========================================================
        News-Page-STYLE 
============================================================ */

.newsPage {
    .header-title {
        background: url(../images/sub/news-bg.jpg) center no-repeat;
        background-size: cover;
        padding: 230px 0;

        @media only screen and (max-width: 1400px) {padding: 200px 0;}

        @media only screen and (max-width: 991px) {padding: 150px 0;}

        @media only screen and (max-width: 767px) {padding: 130px 0;}

        @media only screen and (max-width: 479px) {padding: 100px 0;}

        .title {
            position: relative;
            color: #3f4c5d;
            transform: rotate(90deg);
            display: inline-block;

            &:before {
                content: "";
                position: absolute;
                bottom: -95px;
                right: 0;
                left: 0;
                width: 200px;
                height: 1px;
                background-color: #2868c9;
                transform: rotate(-90deg);
                margin: 0 auto;

                @media only screen and (max-width: 991px){display: none;}
            }
        }
    }

    

    .news-left-bar {
        margin-right: 25px;

        @media only screen and (max-width: 991px){
            margin-right: 0;
            margin-bottom: 100px;
        }

        @media only screen and (max-width: 767px){margin-bottom: 50px;}

        .news-wrapper {
            background-color: $white;
            margin-bottom: 50px;

            img {width: 100%;}

            .wrapper-content {
                padding: 32px 32px 26px;

                @media only screen and (max-width: 479px) {padding: 32px 15px 26px;}

                .title {
                    font-size: 14px;
                    font-weight: 700;
                    color: $white;
                    background-color: $link-color;
                    padding: 4px 8px;
                }

                h3 {
                    font-size: 26px;
                    font-weight: 700;
                    line-height: 36px;
                    color: #111111;
                    margin: 10px 0 7px;

                    @media only screen and (max-width: 479px) {font-size: 20px;line-height: 30px;}
                }

                .post {
                    font-size: 14px;
                    line-height: 27px;
                    text-transform: uppercase;
                    color: #999999;
                }

                p {
                    font-size: 16px;
                    line-height: 24px;
                    color: #666666;
                    padding-top: 10px;
                }

                .link {
                    font-size: 16px;

                    a {
                        color: #666666;

                        &:hover {color: $link-color;}

                        i {
                            margin-left: 5px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

        .pagination {
            @media only screen and (max-width: 767px){margin: 0;}
        }
    }

    .news-right-bar{
        @media (max-width : 991px) {
            margin: 0!important;
        }

        .widget-search{
            .form-control{
                color: #999999;
                height: 40px;
                border: 1px solid #c8c8c8;
                background: transparent;
            }
        }

        .widget-category,
        .widget-archive{
            margin: 50px 0;

            h4{
                font-size: 24px;
                font-weight: 600;
                color: $black;

                @media only screen and (max-width: 767px){font-size: 20px;}
            }

            ul{
                li{
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 40px;
                    border-bottom: 1px solid rgba(199, 197, 197, 0.38);
                    padding: 5px 0;

                    &:last-child{
                        border-bottom: none;
                    }

                    a{
                        color: #31363b;

                        &:hover{
                            color: $link-color;
                        }
                    }
                }
            }
        }

        .widget-post{
            margin-bottom: 75px;

            @media only screen and (max-width: 991px){margin-bottom: 100px;}

            h4{
                font-family: $font-One;
                font-size: 24px;
                font-weight: 600;
                color: $black;
                text-transform: uppercase;
                margin-bottom: 35px;

                @media only screen and (max-width: 767px){font-size: 20px;}
            }

            ul{
                li{
                    margin-bottom: 25px;

                    @media only screen and (max-width: 991px){margin-bottom: 50px;}

                    .thumb{
                        margin-right: 20px;
                            
                        img{
                            width: 70px;
                            height: 100px;
                        }
                    }

                    .post-desk{
                        padding: 8px 0;

                        h5{
                            font-family: $font-One;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 20px;
                            margin: 0;

                            a{
                                color: $black;

                                &:hover{
                                    color: $link-color;
                                }
                            }
                        }

                        .date{
                            font-size: 12px;
                            font-weight: 700;
                            color: #999999;
                        }
                    }
                }
            }
        }

        .widget-tag {
            h4{
                font-family: $font-One;
                font-size: 24px;
                font-weight: 600;
                color: $black;
                text-transform: uppercase;
                margin-bottom: 35px;

                @media only screen and (max-width: 767px){font-size: 20px;}
            }

            ul {
                li {
                    font-family: $font-One;
                    display: inline-block;
                    font-weight: 700;
                    line-height: 26px;
                    margin-right: 7px;

                    a {
                        color: #555555;

                        &:hover {color: $link-color;}
                    }
                }

                li:nth-child(1) a ,
                li:nth-child(3) a ,
                li:nth-child(5) a ,
                li:nth-child(7) a ,
                li:nth-child(8) a ,
                li:nth-child(9) a ,
                li:nth-child(11) a {
                    font-size: 14px;
                    color: #555555;

                    &:hover {color: $link-color;}
                }

                li:nth-child(2) a{
                    color: #212121;
                    font-size: 24px;

                    &:hover {color: $link-color;}
                }

                li:nth-child(4) a {
                    color: #888888;
                    font-size: 20px;

                    &:hover {color: $link-color;}
                }

                li:nth-child(6) a ,
                li:nth-child(13) a {
                    color: #555555;
                    font-size: 18px;

                    &:hover {color: $link-color;}
                }

                li:nth-child(10) a {
                    color: #888888;
                    font-size: 22px;

                    &:hover {color: $link-color;}
                }

                li:nth-child(12) a {
                    color: #212121;
                    font-size: 24px;

                    &:hover {color: $link-color;}
                }
            }
        }

        .widget-photo-gram{
            margin-top: 75px;

            h4{
                font-size: 24px;
                font-weight: 600;
                color: $black;
                margin-bottom: 35px;

                @media only screen and (max-width: 767px){font-size: 20px;}
            }

            .instagram {
                display: -webkit-flex;
                display: flex;
                -webkit-flex-flow: row wrap;
                flex-flow: row wrap;
                overflow: hidden;
                margin: 0 auto;

                .image {
                    background-image: 100%;
                    background-position: center center;
                    width: 73px;
                    height: 73px;
                    margin: 2px;
                    overflow: hidden;
                    position: relative;
                    cursor: pointer;
                    @include transition(1s);

                    &:hover{
                        background-image: 110%;
                    }

                    .caption {
                        display: none;
                    }
                }
            }
        }
    }

    .single-news {
        @media only screen and (max-width: 991px){
            margin-bottom: 100px;
        }

        .news-wrapper {
            background-color: $white;

            img {width: 100%;}

            .wrapper-content {
                padding: 0 32px 70px;

                @media only screen and (max-width: 1199px) {padding: 0 15px 20px;}
                
                @media only screen and (max-width: 479px) {padding: 0 15px 50px;}

                .title {
                    font-size: 14px;
                    font-weight: 700;
                    color: $white;
                    background-color: $link-color;
                    padding: 4px 8px;
                }

                h3 {
                    font-size: 30px;
                    font-weight: 500;
                    line-height: 25px;
                    color: #111111;
                    margin: 0 0 7px;

                    @media only screen and (max-width: 767px){font-size: 25px;}
                }

                .post {
                    font-size: 14px;
                    line-height: 27px;
                    text-transform: uppercase;
                    color: #999999;
                }

                p {
                    font-size: 16px;
                    line-height: 28px;
                    color: #666666;
                    padding-top: 10px;
                }

                img {margin-top: 10px;}

                h4 {
                    font-size: 22px;
                    font-weight: 500;
                    line-height: 28px;
                    color: #212121;
                    margin: 42px 0 15px;
                }

                .link {
                    font-size: 16px;

                    a {
                        color: #666666;

                        &:hover {color: $link-color;}

                        i {
                            margin-left: 5px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

        .widget{
            margin: 25px 32px 17px 40px;

            @media (max-width : 767px) {
                margin-left:0!important;
                margin-right:0!important;
            }

            .widget-tag{
                display: inline-block;
                
                h5{
                    font-family: $font-One;
                    font-size: 14.5px;
                    font-weight: 600;
                    text-transform: capitalize;
                    line-height: 25px;
                    letter-spacing: 1px;
                    color: #000000;
                    display: inline-block;
                    margin-right: 32px;
                    vertical-align: top;
                }

                ul{
                    display: inline-block;

                    li{
                        font-family: $font-One;
                        padding: 0;
                        margin-right: 6px;
                        margin-bottom: 13px;

                        @media (max-width : 767px) {
                            margin-bottom: 15px;
                        }

                        &:last-child{
                            margin-right: 0;
                        }

                        a{
                            font-size: 14px;
                            line-height: 20px;
                            color: #666666;
                            background: $white;
                            padding: 6px 15px;

                            &:hover{
                                color: $white;
                                background: $link-color;
                            }
                        }
                    }
                }
            }

            .widget-social{
                @media (max-width : 1199px) {
                    float: none!important;
                    margin-top: 10px;
                }

                ul{
                    li{
                        font-family: $font-One;
                        padding: 0;
                        margin-right: 6px;

                        @media (max-width : 767px) {
                            margin-bottom: 15px;
                        }

                        &:last-child{
                            margin-right: 0;
                        }

                        a{                                
                            font-size: 16.5px;
                            font-weight: 500;
                            color: $white;
                            padding: 8px 20px;

                            &:hover{
                                color: $black;
                            }

                            i{
                                font-size: 14px;
                                padding-right: 5px;
                            }
                        }
                    }
                }
            }
        }

        .section-bottom {
            background-color: $white;

            .comments-wrapper{

                @media (max-width : 767px) {
                    margin-left:0!important;
                    margin-right:0!important;
                }

                h3{
                    font-size: 21px;
                    font-weight: 700;
                    line-height: 28px;
                    color: #000000;
                    text-align: center;
                    padding-top: 50px;
                    margin-bottom: 65px;

                    @media only screen and (max-width: 479px) {margin-bottom: 40px;}
                }

                .comment-respond{
                    .first-comment {
                        margin: 0 40px 0 45px;

                        @media only screen and (max-width: 479px) {
                            margin: 0 15px;

                            .pull-left {float: none!important;}
                        }
                    }

                    .sub-comment{
                        background: #f8f8f8;
                        padding: 30px;
                        margin: 25px 0 80px 102px;

                        @media (max-width : 767px) {
                            margin-left: 0!important;
                        }

                        @media only screen and (max-width: 479px) {
                            padding: 30px 15px;

                            .pull-left {float: none !important;}
                        }
                    }

                    .comment-avater{
                        width: 43px;
                        height: 43px;
                        margin-right: 2px;
                    }

                    .media-body{
                        @media (max-width : 767px) {
                            display: block;
                            padding-top: 15px;
                            width: auto;
                        }

                        h5{
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 15px;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 15px 0 0;

                            a{
                                color: $black;
                            }
                        }

                        .time{
                            font-size: 14px;
                            line-height: 10px;
                            color: #a9a9a9;
                            letter-spacing: -1px;
                            vertical-align: top;
                        }

                        p{
                            font-size: 14.5px;
                            line-height: 23.5px;
                            color: #666666;
                            margin-bottom: 11px;
                            margin-top: -3px;
                        }

                        .comment-replay{
                            font-family: $font-One;
                            font-size: 16.5px;
                            font-weight: 500;
                            line-height: 25px;
                        }
                    }
                }
            }

            .reserve-blog-form{
                padding: 10px 0 5px;

                h3{
                    font-size: 21.5px;
                    font-weight: 500;
                    line-height: 28px;
                    color: #000000;
                    text-align: center;
                    margin-bottom: 40px;
                }

                .blog-contact-form {
                    padding: 0 25px;

                    @media only screen and (max-width: 479px) {padding: 0;}

                    .form-horizontal {
                        .form-group {
                            margin: 0 0 30px;

                            &.last-group {margin: 0;}

                            .form-control {
                                font-size: 18px;
                                color: #a7a7a7;
                                border: 0;
                                border-bottom: 1px solid #dbdbdb;
                                border-radius: 0;
                                box-shadow: none;
                            }
                        }
                    }
                }


                .button {
                    position: relative;
                    display: inline;
                    overflow: hidden;

                    .btn {
                        position: relative;
                        vertical-align: top;
                        overflow: hidden;
                        padding: 6px 30px;

                        @media only screen and (max-width: 991px){
                            font-size: 18px;
                            float: none!important;
                            margin-left: 40px;
                            margin-top: 15px;
                            padding: 5px 15px;
                        }

                        @media only screen and (max-width: 479px){
                            font-size: 16px;
                            float: none !important;
                            margin-left: 20px;
                            margin-top: 10px;
                            padding: 4px 12px;
                        }

                        &:hover {
                            background-color: transparent;
                            color: $theme-color;
                            border-color: $theme-color;

                            .default-text {
                                top: -35px;

                                -webkit-animation-name: hoverInInner;
                                -moz-animation-name: hoverInInner;
                                -o-animation-name: hoverInInner;
                                -ms-animation-name: hoverInInner;
                                animation-name: hoverInInner;
                            }

                            .hover-text {
                                -webkit-animation-name: hoverIn;
                                -moz-animation-name: hoverIn;
                                -o-animation-name: hoverIn;
                                -ms-animation-name: hoverIn;
                                animation-name: hoverIn;
                            }
                        }

                        .default-text {
                            position: relative;
                            z-index: 1;
                            display: inline-block;
                            @include transition(.5s);

                            -webkit-animation: hoverOutInner 0.3s ease 1 forwards;
                            -moz-animation: hoverOutInner 0.3s ease 1 forwards;
                            -o-animation: hoverOutInner 0.3s ease 1 forwards;
                            animation: hoverOutInner 0.3s ease 1 forwards;
                        }

                        .hover-text {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            line-height: 38px;
                            display: block;
                            background-color: $theme-color;
                            color: $white;
                            z-index: 4;

                            -webkit-transform: translate(0, 100%);
                            -moz-transform: translate(0, 100%);
                            -ms-transform: translate(0, 100%);
                            -o-transform: translate(0, 100%);
                            transform: translate(0, 100%);
                            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                            opacity: 0;
                            -webkit-animation: hoverOut 0.3s ease 1 forwards;
                            -moz-animation: hoverOut 0.3s ease 1 forwards;
                            -o-animation: hoverOut 0.3s ease 1 forwards;
                            animation: hoverOut 0.3s ease 1 forwards;
                        }

                        @keyframes hoverOut {

                            0% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                            100% {
                                -webkit-transform: translate(0, -100%);
                                -moz-transform: translate(0, -100%);
                                -ms-transform: translate(0, -100%);
                                -o-transform: translate(0, -100%);
                                transform: translate(0, -100%);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }
                        }


                        @keyframes hoverIn {
                            0% {
                                -webkit-transform: translate(0, 100);
                                -moz-transform: translate(0, 100);
                                -ms-transform: translate(0, 100);
                                -o-transform: translate(0, 100);
                                transform: translate(0, 100);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }

                            100% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                        }

                        @keyframes hoverInInner {
                            0% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }

                            100% {
                                -webkit-transform: translate(0, -30px);
                                -moz-transform: translate(0, -30px);
                                -ms-transform: translate(0, -30px);
                                -o-transform: translate(0, -30px);
                                transform: translate(0, -30px);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                /*opacity: 0;*/
                            }
                        }


                        @keyframes hoverOutInner {
                            0% {
                                -webkit-transform: translate(0, 30px);
                                -moz-transform: translate(0, 30px);
                                -ms-transform: translate(0, 30px);
                                -o-transform: translate(0, 30px);
                                transform: translate(0, 30px);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                opacity: 0;
                            }

                            100% {
                                -webkit-transform: translate(0, 0);
                                -moz-transform: translate(0, 0);
                                -ms-transform: translate(0, 0);
                                -o-transform: translate(0, 0);
                                transform: translate(0, 0);
                                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}




/* =========================================================
        Contact-Page-STYLE 
============================================================ */

.contactPage {
    .header-title {
        background: url(../images/sub/contact-bg.jpg) center no-repeat;
        background-size: cover;
        padding: 230px 0;

        @media only screen and (max-width: 1400px) {padding: 200px 0;}

        @media only screen and (max-width: 991px) {padding: 150px 0;}

        @media only screen and (max-width: 767px) {padding: 130px 0;}

        @media only screen and (max-width: 479px) {padding: 100px 0;}

        .title {
            position: relative;
            color: $white;
            transform: rotate(90deg);
            display: inline-block;

            &:before {
                content: "";
                position: absolute;
                bottom: -95px;
                right: 0;
                left: 0;
                width: 200px;
                height: 1px;
                background-color: #2868c9;
                transform: rotate(-90deg);
                margin: 0 auto;

                @media only screen and (max-width: 991px){display: none;}
            }
        }
    }


    .connect-section {
        .form-section {
            margin-top: 80px;

            @media only screen and (max-width: 991px){margin-top: 60px;}

            @media only screen and (max-width: 767px){margin-top: 50px;}

            @media only screen and (max-width: 479px){margin-top: 45px;}

            .support-form {
                .form-group {
                    color: #555555;
                    margin-bottom: 40px;

                    @media only screen and (max-width: 991px){margin-bottom: 25px;}

                    @media only screen and (max-width: 767px){margin-bottom: 15px;}

                    &.form-button {
                        margin-bottom: 0;

                        .button {
                            position: relative;
                            display: inline;
                            overflow: hidden;

                            .btn {
                                position: relative;
                                vertical-align: top;
                                overflow: hidden;
                                padding: 6px 30px;

                                @media only screen and (max-width: 991px){
                                    font-size: 18px;
                                    float: none!important;
                                    margin-left: 40px;
                                    margin-top: 15px;
                                    padding: 5px 15px;
                                }

                                @media only screen and (max-width: 479px){
                                    font-size: 16px;
                                    float: none !important;
                                    margin-left: 20px;
                                    margin-top: 10px;
                                    padding: 4px 12px;
                                }

                                &:hover {
                                    background-color: transparent;
                                    color: $theme-color;
                                    border-color: $theme-color;

                                    .default-text {
                                        top: -35px;

                                        -webkit-animation-name: hoverInInner;
                                        -moz-animation-name: hoverInInner;
                                        -o-animation-name: hoverInInner;
                                        -ms-animation-name: hoverInInner;
                                        animation-name: hoverInInner;
                                    }

                                    .hover-text {
                                        -webkit-animation-name: hoverIn;
                                        -moz-animation-name: hoverIn;
                                        -o-animation-name: hoverIn;
                                        -ms-animation-name: hoverIn;
                                        animation-name: hoverIn;
                                    }
                                }

                                .default-text {
                                    position: relative;
                                    z-index: 1;
                                    display: inline-block;
                                    @include transition(.5s);

                                    -webkit-animation: hoverOutInner 0.3s ease 1 forwards;
                                    -moz-animation: hoverOutInner 0.3s ease 1 forwards;
                                    -o-animation: hoverOutInner 0.3s ease 1 forwards;
                                    animation: hoverOutInner 0.3s ease 1 forwards;
                                }

                                .hover-text {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    line-height: 38px;
                                    display: block;
                                    background-color: $theme-color;
                                    color: $white;
                                    z-index: 4;

                                    -webkit-transform: translate(0, 100%);
                                    -moz-transform: translate(0, 100%);
                                    -ms-transform: translate(0, 100%);
                                    -o-transform: translate(0, 100%);
                                    transform: translate(0, 100%);
                                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                    opacity: 0;
                                    -webkit-animation: hoverOut 0.3s ease 1 forwards;
                                    -moz-animation: hoverOut 0.3s ease 1 forwards;
                                    -o-animation: hoverOut 0.3s ease 1 forwards;
                                    animation: hoverOut 0.3s ease 1 forwards;
                                }

                                @keyframes hoverOut {

                                    0% {
                                        -webkit-transform: translate(0, 0);
                                        -moz-transform: translate(0, 0);
                                        -ms-transform: translate(0, 0);
                                        -o-transform: translate(0, 0);
                                        transform: translate(0, 0);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                        opacity: 1;
                                    }
                                    100% {
                                        -webkit-transform: translate(0, -100%);
                                        -moz-transform: translate(0, -100%);
                                        -ms-transform: translate(0, -100%);
                                        -o-transform: translate(0, -100%);
                                        transform: translate(0, -100%);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                        opacity: 0;
                                    }
                                }


                                @keyframes hoverIn {
                                    0% {
                                        -webkit-transform: translate(0, 100);
                                        -moz-transform: translate(0, 100);
                                        -ms-transform: translate(0, 100);
                                        -o-transform: translate(0, 100);
                                        transform: translate(0, 100);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                        opacity: 0;
                                    }

                                    100% {
                                        -webkit-transform: translate(0, 0);
                                        -moz-transform: translate(0, 0);
                                        -ms-transform: translate(0, 0);
                                        -o-transform: translate(0, 0);
                                        transform: translate(0, 0);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                        opacity: 1;
                                    }
                                }

                                @keyframes hoverInInner {
                                    0% {
                                        -webkit-transform: translate(0, 0);
                                        -moz-transform: translate(0, 0);
                                        -ms-transform: translate(0, 0);
                                        -o-transform: translate(0, 0);
                                        transform: translate(0, 0);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                        opacity: 1;
                                    }

                                    100% {
                                        -webkit-transform: translate(0, -30px);
                                        -moz-transform: translate(0, -30px);
                                        -ms-transform: translate(0, -30px);
                                        -o-transform: translate(0, -30px);
                                        transform: translate(0, -30px);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                        /*opacity: 0;*/
                                    }
                                }


                                @keyframes hoverOutInner {
                                    0% {
                                        -webkit-transform: translate(0, 30px);
                                        -moz-transform: translate(0, 30px);
                                        -ms-transform: translate(0, 30px);
                                        -o-transform: translate(0, 30px);
                                        transform: translate(0, 30px);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                                        opacity: 0;
                                    }

                                    100% {
                                        -webkit-transform: translate(0, 0);
                                        -moz-transform: translate(0, 0);
                                        -ms-transform: translate(0, 0);
                                        -o-transform: translate(0, 0);
                                        transform: translate(0, 0);
                                        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                
                    .form-control {
                        font-size: 16px;
                        border: 1px solid #b7b7b7;
                        border-radius: 0;
                        box-shadow: none;
                        padding: 6px 30px;
                        height: 45px;

                        &.form-message {
                            height: auto;
                        }

                        &.domainSearchBar {
                            color: #949494;
                        }
                    }
                }
            }
        }
    }
}



/* =========================================================
        Scroll-To-Top-STYLE 
============================================================ */

#toTop {
    position        : fixed;
    bottom          : 50px;
    right           : 30px;
    color           : #403d3e;
    cursor          : pointer;
    display         : none;
    width           : 35px;
    height          : 35px;
    font-size       : 16px;
    line-height     : 30px;
    border-radius   : 4px;
    text-align      : center;
    z-index         : 999;
}



/* =========================================================
        Preloader-STYLE 
============================================================ */

#preloader {
    background-color: $white;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;

    .preloader-inner {
        width: 40px;
        height: 46px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -40px;
        margin-left: -40px;
    }

    .preloader-inner span {
        background-color: $theme-color;
        width: 12px;
        height: 12px;
        float: left;
        margin: 2px 2px 2px 0;
        border-radius: 50%;
    }

    .preloader-inner > span:nth-child(3n+3) {
        margin-right: 0;
    }

    .preloader-inner span {
        -webkit-animation: perloader-pulse 0.4s infinite alternate;
        -moz-animation: perloader-pulse 0.4s infinite alternate;
        -o-animation: perloader-pulse 0.4s infinite alternate;
        -ms-animation: perloader-pulse 0.4s infinite alternate;
        animation: perloader-pulse 0.4s infinite alternate;
    }

    .preloader-inner > span:first-child {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        -o-animation-delay: 0.1s;
        -ms-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .preloader-inner > span:nth-child(2) {
        background-color: $theme-color;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        -ms-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .preloader-inner > span:nth-child(3) {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        -o-animation-delay: 0.3s;
        -ms-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .preloader-inner > span:nth-child(4) {
        background-color: $theme-color;
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        -ms-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .preloader-inner > span:nth-child(5) {
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        -o-animation-delay: 0.5s;
        -ms-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .preloader-inner > span:nth-child(6) {
        background-color: $theme-color;
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .preloader-inner > span:nth-child(7) {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        -o-animation-delay: 0.1s;
        -ms-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .preloader-inner > span:nth-child(8) {
        background-color: $theme-color;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        -ms-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .preloader-inner > span:nth-child(9) {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        -o-animation-delay: 0.3s;
        -ms-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
}

/*** preloader animation ***/
@-webkit-keyframes perloader-pulse {
    form {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }
}

@keyframes perloader-pulse {
    form {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }
}