@import "sub/_variable.scss";
@import "sub/_mixing.scss";
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);



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

body{
    
    font-family         : $font-One;
    font-size           : 15px;
    line-height         : 25px;
    font-weight         : 400;
    color               : #6a6a6a;
    background-color    : #ffffff;
    overflow-x          : hidden;

    &.dark-layout {
        color               : #696969;
        background-color    : #1f1f1f;

        .section-title h2 {color : #484848;}


        .footer-section {
            background: #252525;

            .second-footer {
                background-color: #101010;

                .contact-wrapper ul li {color: #545454;}

                .copy-right p {color: #4a4a4a;}
            }
        }
    }
}

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

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     : 42px;
    font-weight     : 600;  
    color           : #092a48;

    @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           : #092a48;

    @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-One; 
    font-size       : 16px;
    font-weight     : 600;
    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-default{
    position            : relative; 
    font-size           : 16px;
    color               : $theme-color;
    background-color    : $white;
    border              : 2px solid $theme-color;
    border-radius       : 0;
    padding             : 8px 22px;
    border-radius       : 25px;
    overflow            : hidden;
    z-index             : 5;
    @include transition(.3s);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $theme-color;
        border-radius: 25px;
        transform: translateX(-102%);
        z-index: -1;

        @include transition(.3s);
    }

    &:hover {
        &::before {transform: translateX(0);}
        
        color: $white;
    }

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

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

.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; 
    border-color        : $theme-color; 
}


.btn-primary{
    position            : relative;
    font-size           : 16px;
    font-weight         : 600;
    border              : 0;
    border-radius       : 5px;
    padding             : 8px 25px;
    z-index             : 5;
    overflow            : hidden;
    background-color    : $theme-color;
    color               : $white;

    @include transition(.3s);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $white;
        border-radius: 25px;
        transform: translateX(-102%);
        /*background-color: #3aaed0;*/
        background-color: $nav-blue;
        opacity: 0;
        transform: scale(0.5, 1);
        transition: all 0.4s ease 0s;
        border-radius: 5px;
        z-index: -1;

        @include transition(.3s);
    }

    &:hover {
        &::before {
            opacity: 1;
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }
    }

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

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

.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{
    background-color    : $theme-color;
    color               : $white;
  
}




/* =========================================================
        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     : 100px 0;

    @media only screen and (max-width: 991px) {padding: 80px 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;}
}



/* =========================================================
        Border Style
============================================================ */

.border-break {
    .border {
        border-bottom: 1px solid #dfdfdf;
    }
}





/* =========================================================
        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;
    }
}




/* =========================================================
        Box Layout STYLE 
============================================================ */

.boxLayout , .box-layout{
    margin: 0 auto;
    background: url(../images/pattern.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;

    @media only screen and (min-width: 1200px) {width: 1200px;}

    section ,header {background-color: $white;}


    .box-nav {
        position: relative;

        .navbar {
            left: 0;
            background-color: $white;

            &::before {width: 350px;}

            .navbar-header .navbar-brand img {padding: 22px 25px;}

            .navbar-collapse .navbar-nav {margin-right: 45px;}
        }
    }

    .navbar {
        &.sticky {
            width: 1200px;
            margin: 0 auto;
        }
    }


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

        .tparrows {
            &.tp-leftarrow{left: 0!important;}

            &.tp-rightarrow{right: 0!important;}
        }
    }

    .searching-section {
        overflow: hidden;

        .caption .caption-two {
            right: -10%;

            img {width: 75%;}
        }
    }

    .subscribe-section {overflow: hidden;}

    .optimized-section .content-wrapper {
        padding: 80px 80px 0 30px;

        @media only screen and (max-width: 991px){padding: 80px 15px 60px;}
    }
}




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

.section-title {
    position: relative;

    h2 {
        font-size: 36px;
        font-weight: 600;
        line-height: 40px;
        color: #092a48;
        margin-bottom: 39px;

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

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

    .border {
        position: absolute;
        top: 53px;
        left: 0;
        right: 0;
        width: 100px;
        height: 2px;
        background-color: $theme-color;
        margin: 0 auto;

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

    .border-2 {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        width: 100px;
        height: 4px;
        background-color: $theme-color;
        margin: 0 auto;

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

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

    .border-3 {
        max-width: 100%;
        height: 2px;
        background: url(../images/title-border-1.png) no-repeat center;
        margin: -20px auto 25px;

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

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

    .border-4 {
        max-width: 100%;
        height: 2px;
        background: url(../images/title-border-2.png) no-repeat center;
        margin: -20px auto 25px;

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

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

    p {
        font-size: 16px;
        color: #6a6a6a;

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




/* =========================================================
        Header-Title STYLE 
============================================================ */

.header-title{
    padding: 215px 0 80px;

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

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

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

    .title{
        font-size: 48px;
        font-weight: 700;
        line-height: 50px;
        color: #092a48;
        margin-bottom: 2px;
        letter-spacing: -0.5px;

        @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 {
        font-size: 18px;
        font-weight: 500;
        color: #092a48;

        .text-color {color: $theme-color;}
    }
}




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

.header-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    
    @media only screen and (max-width: 767px){
        position: relative;
    }

    .top-bar {
        min-height: 60px;
        line-height: 60px;
        background-color: $nav-blue;

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

        @media only screen and (max-width: 767px) {
            text-align: center;
            min-height: auto;
            line-height: 35px;
            padding: 5px 0;
        }

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

        .header-left-bar {
            .contact-wrapper {
                display: inline-block;
                
                li {
                    font-size: 14px;
                    display: inline-block;
                    color: #9daab8;
                    margin-right: 30px;

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

                    @media only screen and (max-width: 479px){
                        display: block;
                        margin: 0;
                        line-height: 30px;
                    }

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

                    i {
                        font-size: 20px;
                        color: $theme-color;
                        vertical-align: middle;
                        margin-right: 5px;
                    }
                }
            }
        }

        .header-right-bar {
            @media only screen and (max-width: 767px) {text-align: center;}

            .language {
                position: relative;
                display: inline-block;
                margin-right: 15px;
                z-index: 9;

                .dropbar {
                    color: $theme-color;
                    text-transform: uppercase;
                    text-align: center;

                    i {
                        font-size: 20px;
                        margin-right: 10px;
                        vertical-align: middle;
                    }

                    &.closed {
                        .title {
                            &::after {
                                -webkit-transform: rotate(0deg);
                                -moz-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                -o-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                        }

                        .dropbar-menu {
                            margin-top: 0px;

                            li {
                                height: 0px;
                            }
                        }
                    }

                    .title{
                        cursor: pointer;
                        display: inline-block;

                        &::after {
                            content: "\f107";
                            font-family: "FontAwesome";
                            position: absolute;
                            right: 0;

                            -webkit-transform: rotate(180deg);
                            -moz-transform: rotate(180deg);
                            -ms-transform: rotate(180deg);
                            -o-transform: rotate(180deg);
                            transform: rotate(180deg);
                        }

                        img {margin-right: 8px;}
                    }

                    .dropbar-menu {
                        position: relative;
                        overflow: hidden;
                        max-height: 200px;
                        width: 130px;
                        text-align: center;

                        -webkit-transition: all 0.2s;
                        -moz-transition: all 0.2s;
                        transition: all 0.2s;

                        -webkit-box-sizing: "border-box";
                        -moz-box-sizing: "border-box";
                        box-sizing: "border-box";

                        ul {
                            position: absolute;
                            top: 0;
                            width: 100%;
                            border: 1px solid #085370;

                            li {
                                width: 100%;
                                height: 40px;
                                line-height: 40px;
                                border-bottom: 1px solid #085370;
                                padding: 0 12px;
                                vertical-align: top;
                                overflow: hidden;
                                cursor: pointer;
                                -webkit-transition: margin-top 0.5s, height 0.5s;
                                -moz-transition: margin-top 0.5s, height 0.5s;
                                transition: margin-top 0.5s, height 0.5s;

                                &:hover {
                                    background-color: #D9E1E4;
                                    color: #343C3F;
                                }

                                &:last-child {border: 0;}

                                img {margin-right: 8px;}
                            }
                        }
                    }
                }
            }

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

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

                    i {
                        font-size: 16px;
                        color: #9daab8;
                        @include transition(.5s);

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

        .contact-bar {
            display: flex;

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

            li {
                flex: 1;

                @media only screen and (max-width: 991px){
                    float: left;
                    width: 50%;
                    margin: 12px 0;
                }

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

                .caption {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    background: $theme-color;
                    border-radius: 50%;
                    float: left;
                    text-align: center;
                    margin-right: 12px;

                    @media only screen and (max-width: 1199px) {
                        width: 40px;
                        height: 40px;
                        line-height: 40px;

                        img {
                            width: 15px;
                        }
                    }

                    @media only screen and (max-width: 510px) {
                        width: 30px;
                        height: 30px;
                        line-height: 30px;

                        img {
                            width: 10px;
                        }
                    }
                }

                h4 {
                    font-size: 20px;
                    font-weight: 500;
                    color: #fcfeff;
                    margin: 0;

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

                .time {
                    font-size: 14px;
                    color: #9a9a9a;

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

    .middle-wrapper {
        background: $white;
        padding: 25px 0;

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

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

        .header-left-bar {
            .navbar-brand {
                margin: 0 0 0 30px;
                padding: 0;

                @media only screen and (max-width: 991px){
                    margin: 4px 0 0 15px;
                    height: auto;
                }

                @media only screen and (max-width: 767px) {
                    float: none!important;
                    display: block;
                    margin: 0 0 20px;
                }

                img {
                    max-width: 100%;

                    @media only screen and (max-width: 767px){
                        margin: 0 auto;
                        width: 51px;
						max-width:100%;
                    }
                }
            }
        }

        .header-right-bar {
            .finding-section {
                display: flex;

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


                li {
                    flex: 1;

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

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

                    i {
                        font-size: 20px;
                        width: 42px;
                        height: 42px;
                        line-height: 42px;
                        color: $white;
                        background: $theme-color;
                        border-radius: 50%;
                        text-align: center;
                        float: left;
                        box-shadow: 0 0 10px 0 $theme-color;
                        margin: 3px 15px 0 0;

                        @media (min-width : 768px) and (max-width : 991px) {
                            width: 30px;
                            height: 30px;
                            line-height: 30px;
                            margin: 3px 10px 0 0;
                        }

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

                    h5 {
                        font-size: 18px;
                        font-weight: 500;
                        color: #031633;
                        margin-bottom: 3px;

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

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

                    .location {
                        font-size: 14px;
                        color: #666666;

                        @media (min-width : 768px) and (max-width : 991px) {word-break: break-all;}

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

    .navbar {
        border: 0;
        border-radius: 0;
        margin: 0;
        min-height: auto;
        background-color: $theme-color;
        z-index: 998;

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

                img {
                    padding: 35px 0;

                    @include transition(.5s);
                }
            }
        }

        &.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            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: 20px 0;}
                }
            }

            .navbar-collapse {
                width: 1140px;
                margin: 0 auto;

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

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

                        .dropdown {z-index: -1;}

                        .cart::before {top: 12px;font-size: 10px;}

                        .text {top: 10px;}
                    }
                } 
            }          
        }

        .navbar-collapse {
            padding: 0;

            .navbar-nav {
                margin: 0 30px;

                li {
                    position: relative;
                    font-size: 14px;
                    font-weight: 500;
                    text-transform: uppercase;
                    margin-right: 28px;

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

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

                    img {margin-right: 8px;}

                    a, .search-view , .cart-icon{
                        color: $white;
                        padding: 0;
                        line-height: 55px;
                        @include transition(.5s);

                        &:hover {
                            color: #313131;
                            background-color: transparent;
                        }
                    }

                    .cart-icon i {
                        color: #222222;

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

                    .search-view {cursor: pointer;}

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

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

                    .dropdown-menu {
                        top: 55px;
                        left: -25px;
                        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 {
                            position: relative;
                            font-size: 14px;
                            font-weight: 500;
                            border-bottom: 1px solid rgba(97, 109, 126, 0.12);
                            margin: 0 25px;
                            padding: 0 5px;
                            @include transition(.5s); 

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

                            &:hover {
                                border-bottom: 1px solid transparent;

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

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

                                @include transition(.5s);
                            }

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

                                &::before {display: none;}
                            }

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

                                &:hover {
                                    color: $link-color !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(9, 42, 72, 0.98);
                        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: 1;

                            .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%;
                            text-align: right;
                            padding-right: 60px;
                            padding-top: 20px;

                            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: 50px;
                                    padding: 0;

                                    &::placeholder {color: $white;}
                                }
                            }

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

                    .cart-wrapper {
                        cursor: pointer;

                        &.open {
                            .cart-item {
                                display: block;
                                visibility: visible;
                                opacity: 1;
                                transform: translateY(0);
                                z-index: 5;
                            }
                        }
                    }

                    .text {
                        width: 20px;
                        height: 20px;
                        color: $white;
                        background-color: #313131;
                        border-radius: 50%;
                        padding: 4px 6px;
                        position: absolute;
                        top: 25px;
                        right: -11px;
                        line-height: 11px;
                        text-align: center;
                        font-size: 10px;
                    }

                    .cart-item {
                        position: absolute;
                        top: 55px;
                        right: 0;
                        background-color: $white;
                        border: 2px solid $theme-color;
                        padding: 15px 15px 0;
                        transform: translateY(50px);
                        visibility: hidden;
                        opacity: 0;
                        z-index: -9999;

                        @include transition(.5s);

                        @media (min-width : 992px) and (max-width : 1250px) {right: 0;}

                        ul {
                            width: 300px;

                            li {
                                line-height: 30px;
                                padding: 10px 0;
                                border-bottom: 1px solid $theme-color;

                                img {
                                    width: 75px;
                                    float: left;
                                }

                                .content {
                                    color: #313131;
                                    padding-left: 15px;

                                    h5 {
                                        font-weight: 600;
                                        color: #313131;
                                        margin-bottom: 5px;
                                    }

                                    .rate {
                                        color: $theme-color;
                                        display: block;
                                    }

                                    .option {
                                        i {margin: 0;}
                                    }
                                }
                            }
                        }

                        .amount {
                            color: #333;
                            line-height: 30px;
                            padding: 10px 0 30px;
                        }

                        .btn {
                            border-radius: 8px;
                            width: 100%;
                            font-size: 16px;
                            padding: 7px 44px;
                            margin-bottom: 25px;

                            &::before {display: none;}

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




/* =========================================================
        Slider-Section STYLE 
============================================================ */

.slider-section {
    overflow: hidden;

    #rev_slider_1 {
        .font-extra-bold {
            font-size: 55px!important;
            font-weight: 600!important;
            line-height: 68px!important;
            color: $white;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 18px!important;
            font-weight: 500!important;
            line-height: 30px!important;
            color: $white!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .btn {
            font-size: 18px!important;
            border-radius: 0;
            padding: 11px 55px!important;
            margin: 0 2px!important;

            @media only screen and (max-width: 991px){padding: 10px 40px!important;}

            @media only screen and (max-width: 767px){padding: 10px 25px!important;}

            &::before {border-radius: 0;}


            &.color-bg {
                background: $white!important;
                color: $theme-color!important;

                &::before {background-color: $nav-blue;}
            }

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

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: auto!important;
                bottom: 35px!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 0!important;
                text-align: center!important;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }

                &.tp-leftarrow {
                    left: auto!important;
                    right: 157px!important;

                    @media only screen and (min-width: 1500px){right: 167px!important;}

                    @media only screen and (max-width: 991px){right: 134px!important;}

                    @media only screen and (max-width: 767px){right: 110px!important;}
                }

                &.tp-rightarrow {
                    right: 1%!important;
                    left: auto!important;
                }
            }
        }
    }

    #rev_slider_2 {
        .font-extra-bold {
            font-size: 48px!important;
            font-weight: 600!important;
            line-height: 62px!important;
            color: $white;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 18px!important;
            font-weight: 500!important;
            line-height: 30px!important;
            color: $white!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .btn {
            font-size: 18px!important;
            border-radius: 0;
            padding: 11px 55px!important;
            margin: 0 2px!important;

            @media only screen and (max-width: 991px){padding: 10px 40px!important;}

            @media only screen and (max-width: 767px){padding: 10px 25px!important;}

            &::before {border-radius: 0;}


            &.color-bg {
                background: $white!important;
                color: $theme-color!important;

                &::before {background-color: $nav-blue;}
            }

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

        &:hover {
            .tparrows {
                &.tp-leftarrow,
                &.tp-rightarrow {opacity: 1;}
            }
        }

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: 55%!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 0!important;
                text-align: center!important;
                opacity: 0;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }
            }
        }
    }

    #rev_slider_3 {
        .font-extra-bold {
            font-size: 48px!important;
            font-weight: 700!important;
            line-height: 62px!important;
            color: $nav-blue;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 18px!important;
            font-weight: 500!important;
            line-height: 30px!important;
            color: #222222!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .slider-btn {
            padding: 0!important;

            .btn {
                font-size: 18px!important;
                border-radius: 0;
                padding: 11px 55px!important;
                margin: 0 2px!important;

                @media only screen and (max-width: 991px){padding: 10px 40px!important;}

                @media only screen and (max-width: 767px){padding: 10px 25px!important;}

                &::before {border-radius: 0;}


                &.color-bg {
                    background: $white!important;
                    color: $theme-color!important;
                    margin-left: 15px!important;

                    &::before {background-color: $nav-blue;}
                }

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


        &:hover {
            .tparrows {
                &.tp-leftarrow,
                &.tp-rightarrow {opacity: 1;}
            }
        }

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: 55%!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 0!important;
                text-align: center!important;
                opacity: 0;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }
            }
        }
    }

    #rev_slider_4 {
        .font-extra-bold {
            font-size: 48px!important;
            font-weight: 700!important;
            line-height: 90px!important;
            color: $white;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 18px!important;
            font-weight: 400!important;
            line-height: 30px!important;
            color: $white!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .btn {
            font-size: 18px!important;
            line-height: 34px!important;
            border-radius: 0;
            padding: 11px 55px!important;
            margin: 0 2px!important;

            @media only screen and (max-width: 991px){padding: 10px 40px!important;}

            @media only screen and (max-width: 767px){padding: 10px 25px!important;}

            &::before {border-radius: 0;}


            &.color-bg {
                background: $white!important;
                color: $theme-color!important;

                &::before {background-color: $nav-blue;}
            }

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

        &:hover {
            .tparrows {
                &.tp-leftarrow,
                &.tp-rightarrow {opacity: 1;}
            }
        }

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: 55%!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 0!important;
                text-align: center!important;
                opacity: 0;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }
            }
        }
    }

    #rev_slider_5 {
        .font-extra-bold {
            font-size: 60px!important;
            font-weight: 700!important;
            line-height: 90px!important;
            color: $white;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 24px!important;
            font-weight: 400!important;
            line-height: 35px!important;
            color: $white!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .btn {
            font-size: 16px!important;
            font-weight: 500;
            line-height: 34px!important;
            border-radius: 25px;
            padding: 7px 40px!important;
            margin: 0 2px!important;

            @media only screen and (max-width: 991px){padding: 10px 40px!important;}

            @media only screen and (max-width: 767px){padding: 10px 25px!important;}

            &::before {border-radius: 25px;}


            &.color-bg {
                background: $white!important;
                color: $theme-color!important;

                &::before {background-color: $nav-blue;}
            }

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

        &:hover {
            .tparrows {
                &.tp-leftarrow,
                &.tp-rightarrow {opacity: 1;}
            }
        }

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: 63%!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 50%!important;
                text-align: center!important;
                opacity: 0;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }
            }
        }
    }

    #rev_slider_6 {
        .font-extra-bold {
            font-size: 48px!important;
            font-weight: 700!important;
            line-height: 90px!important;
            color: $nav-blue;
            margin: 14px 0 15px!important;
            

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

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

            @media only screen and (max-width: 767px){
                font-size: 25px!important;
                line-height: 40px!important;
                margin: 0 0 9px!important;
            }
        }

        .font-medium {
            font-size: 18px!important;
            font-weight: 400!important;
            line-height: 30px!important;
            color: #092a48!important;

            &.text-center {text-align: center!important;}

            @media only screen and (max-width: 767px){
                font-size: 16px!important;
                line-height: 25px!important;
                margin: 0 0 9px!important;
            }

            @media only screen and (max-width: 479px){
                font-size: 14px!important;
                line-height: 18px!important;
                margin: 30px 0 9px!important;
            }
        }

        .btn {
            font-size: 16px!important;
            font-weight: 500;
            line-height: 34px!important;
            border-radius: 5px;
            padding: 7px 63px!important;
            margin: 0 2px!important;

            @media only screen and (max-width: 991px){padding: 10px 40px!important;}

            @media only screen and (max-width: 767px){padding: 10px 25px!important;}

            &::before {border-radius: 5px;}


            &.color-bg {
                background: $white!important;
                color: $theme-color!important;

                &::before {background-color: $nav-blue;}
            }

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

        &:hover {
            .tparrows {
                &.tp-leftarrow,
                &.tp-rightarrow {opacity: 1;}
            }
        }

        .tparrows {
            &.tp-leftarrow,
            &.tp-rightarrow {
                top: 55%!important;
                min-width: 50px!important;
                min-height: 50px!important;
                width: 50px!important;
                height: 50px!important;
                line-height: 50px!important;
                background: $white!important;
                border-radius: 50%!important;
                text-align: center!important;
                opacity: 0;
                @include transition(.5s);

                @media only screen and (max-width: 991px){
                    width: 40px!important;
                    height: 40px!important;
                    min-width: 40px!important;
                    min-height: 40px!important;
                    line-height: 40px!important;
                }

                @media only screen and (max-width: 767px){
                    width: 30px!important;
                    height: 30px!important;
                    min-width: 30px!important;
                    min-height: 30px!important;
                    line-height: 30px!important;
                }

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

                    &::before {color: $white!important;}
                }

                &::before {
                    font-size: 20px!important;
                    line-height: 50px!important;
                    color: $theme-color!important;

                    @media only screen and (max-width: 991px){line-height: 40px!important;}

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

                    @include transition(.5s);
                }
            }
        }
    }
}




/* =========================================================
        Counting-Section STYLE 
============================================================ */

.counting-section {
    background: url(../images/counter-bg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;

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

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

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

    .counting-pusher {
        display: flex;

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

        .counting-wrapper {
            flex: 1;

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

            @media only screen and (max-width: 499px){
                width: 100%;
                float: none;
                margin-bottom: 30px;
            }

            .icon {
                width: 73px;
                height: 73px;
                text-align: center;
                border: 4px solid $theme-color;

                @media only screen and (max-width: 599px){
                    width: 50px;
                    height: 50px;
                    border: 2px solid $theme-color;

                    img {width: 40px;}
                }

                img {padding: 10px;}
            }

            .content {
                margin: 10px 0 0 90px;

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

                .count-description {
                    .timer {
                        font-size: 48px;
                        font-weight: 600;
                        line-height: 24px;
                        color: $theme-color;
                        margin-bottom: 20px;

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

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

                p {
                    font-size: 18px;
                    line-height: 24px;
                    color: $white;
                    margin-bottom: 0;

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




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

.project-section {
    .section-title {
        margin-bottom: 60px;

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

    .portfolio-sorting {
        margin: -7px 0 33px;

        li {
            position: relative;
            padding: 0 18px;

            &::before {
                content: "";
                position: absolute;
                right: 0;
                top: 9px;
                width: 2px;
                height: 18px;
                background: #222222;
                transform: rotate(18deg);
            }

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

            a {
                font-size: 18px;
                font-weight: 400;
                line-height: 36px;
                color: #222222;

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

    .project-wrapper {
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;

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

        -webkit-perspective: 50em; 
        -moz-perspective: 50em;
        perspective: 50em; 

        &:hover {
            .hover-view {
                &:before {
                    -webkit-transform: rotate(0);
                    -moz-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -o-transform: rotate(0);
                    transform: rotate(0);
                }

                i {
                    opacity: 1;

                    -webkit-transform: scale(1);
                    -moz-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
                }

                h4, p {
                    opacity: 1;

                    -webkit-transform: translateX(0);
                    -moz-transform: translateX(0);
                    -ms-transform: translateX(0);
                    -o-transform: translateX(0);
                    transform: translateX(0);
                }
            }
        }

        img {
            width: 100%;
        }

        .hover-view {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: left;
            padding: 0 20px;

            &:before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 75px;
                background-color: rgba(72, 199, 236, 0.85);
                padding: 30px;
                z-index: 1;

                -webkit-transition: all 0.35s ease;
                -o-transition: all 0.35s ease;
                -moz-transition: all 0.35s ease;
                transition: all 0.35s ease;

                -webkit-transform: rotateX(105deg);
                -moz-transform: rotateX(105deg);
                transform: rotateX(105deg);

                -webkit-transform-origin: 50% 100%;
                -moz-transform-origin: 50% 100%;
                -ms-transform-origin: 50% 100%;
                -o-transform-origin: 50% 100%;
                transform-origin: 50% 100%;
            }

            i {
                position: relative;
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 21px;
                color: $white;
                border-radius: 50%;
                border: 2px solid $white;
                text-align: center;
                opacity: 0;
                z-index: 6;
                @include transition(.5s);

                transition-delay: .1s;

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

            h4 {
                position: relative;
                font-size: 18px;
                font-weight: 500;
                line-height: 18px;
                color: $white;
                margin-bottom: 0;
                opacity: 0;
                z-index: 5;
                @include transition(.5s);

                transition-delay: .1s;

                -webkit-transform: translateX(-100px);
                -moz-transform: translateX(-100px);
                -ms-transform: translateX(-100px);
                -o-transform: translateX(-100px);
                transform: translateX(-100px);
            }

            p {
                position: relative;
                font-size: 14px;
                color: $white;
                opacity: 0;
                z-index: 5;

                @include transition(.5s);

                transition-delay: .1s;

                -webkit-transform: translateX(100px);
                -moz-transform: translateX(100px);
                -ms-transform: translateX(100px);
                -o-transform: translateX(100px);
                transform: translateX(100px);
            }
        }
    }

    .link {
        .btn {
            padding: 7px 25px;
            margin-top: 33px;
        }
    }

    .project-content {
        border: 2px solid $theme-color;
        border-radius: 5px;
        padding: 45px;

        h3 {
            font-size: 26px;
            font-weight: 500;
            line-height: 30px;
            color: #051829;
        }

        p {
            font-size: 15px;
            color: #6a6a6a;

        }

        .category {
            margin-top: 30px;

            li {
                margin-bottom: 8px;

                &:last-child {margin: 0;}

                i {
                    color: $theme-color;
                    margin-right: 5px;
                }

                .bold {
                    font-weight: 600;
                    color: #051829;
                }
            }
        }
    }
}




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

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

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

    #testimonial-carousel {
        position: relative;

        .carousel-inner {
            .carousel-wrapper {
                padding: 0 55px;

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

                p {
                    font-size: 24px;
                    line-height: 36px;
                    color: $white;
                    margin-bottom: 43px;
                    word-break: break-all;

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

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

                .reviewer {
                    position: relative;
                    padding-top: 25px;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        width: 60px;
                        height: 4px;
                        background-color: $theme-color;
                        margin: 0 auto;
                    }

                    h5 {
                        font-size: 26px;
                        line-height: 36px;
                        color: $white;
                        margin-bottom: 0;

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

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

                    .position {
                        font-size: 18px;
                        color: #999;

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

        .carousel-control {
            &.left,
            &.right {
                position: absolute;
                top: auto;
                bottom: 0;
                width: 47px;
                height: 47px;
                line-height: 47px;
                background-color: transparent;
                border: 2px solid $theme-color;
                text-align: center;
                background-image: none;
                opacity: 1;
                text-shadow: none;
                @include transition(.5s);

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

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

            &.left {
                left: auto;
                right: 52px;

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



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

.testimonial-two-section {
    #testimonial-carousel {
        position: relative;

        .carousel-inner {
            .carousel-wrapper {
                padding: 0 55px;
                margin-bottom: 95px;

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

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

                p {
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 36px;
                    color: #222222;
                    margin-bottom: 43px;
                    word-break: break-all;

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

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

                .reviewer {
                    position: relative;
                    padding-top: 25px;

                    &::before {
                        content: "";
                        position: absolute;
                        top: -8px;
                        left: 0;
                        right: 0;
                        width: 60px;
                        height: 4px;
                        background-color: $theme-color;
                        margin: 0 auto;
                    }

                    h5 {
                        font-size: 26px;
                        line-height: 36px;
                        color: #222222;
                        margin-bottom: 0;

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

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

                    .position {
                        font-size: 18px;
                        color: #999;

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

        .carousel-control {
            &.left,
            &.right {
                position: absolute;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 47px;
                height: 47px;
                line-height: 47px;
                background-color: $theme-color;
                text-align: center;
                background-image: none;
                opacity: 1;
                text-shadow: none;
                margin: 0 auto;
                @include transition(.5s);

                &:hover {
                    background-color: $nav-blue;
                }

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

            &.left {
                left: -52px;

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

            &.right {
                right: -52px;

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



/* =========================================================
        Boost-Section STYLE 
============================================================ */

.boost-section {
    position: relative;
    z-index: 5;

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

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

    .boost-wrapper {
        position: relative;
        overflow: hidden;

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

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

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

        &:hover {
            .boost-content {
                -webkit-transform: translateY(0);
                -moz-transform: translateY(0);
                -ms-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
                padding: 45px 35px;

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

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

        img {width: 100%;}

        .boost-content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(9, 42, 72, 0.92);
            padding: 15px 35px 45px 35px;
            -webkit-transform: translateY(75%);
            -moz-transform: translateY(75%);
            -ms-transform: translateY(75%);
            -o-transform: translateY(75%);
            transform: translateY(75%);

            @include transition(.3s);

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

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

            .icon {
                float: left;

                img {
                    width: auto;
                    vertical-align: -webkit-baseline-middle;

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

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

            .wrapper-content {
                margin-left: 65px;

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

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

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

                h4 {
                    font-size: 24px;
                    font-weight: 600;
                    line-height: 36px;
                    color: $white;
                    margin-bottom: 14px;

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

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

                p {
                    color: $white;
                    margin-bottom: 25px;

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

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

                .link {
                    font-weight: 600;

                    &:hover {color: $white;}
                }
            }
        }
    }
}




/* =========================================================
        Service-Section STYLE 
============================================================ */

.service-section {
    background-color: $nav-blue;

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

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

        h2 {color: $white;}
    }

    .first-row {
        margin-bottom: 45px;

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

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

    .service-wrapper {
        position: relative;
        padding: 40px 40px;
        border-radius: 5px;
        @include transition(.3s);

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

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

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

        &:hover {
            /*background-color: $white;*/

            .wrapper-content {
                h3 a {
                    color: #002e5b;

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

            .hover {
                .hover-one,
                .hover-two,
                .hover-three,
                .hover-four {
                    -webkit-transform: scale(1);
                    -moz-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
                    opacity: 1;
                }
            }
        }

        i {
            position: relative;
            font-size: 24px;
            color: $theme-color;
            float: left;
            z-index: 5;

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

        .wrapper-content {
            position: relative;
            margin-left: 43px;
            z-index: 5;

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

            h3 {
                font-size: 24px;
                font-weight: 600;
                margin-bottom: 9px;

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

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

                a {
                    color: $white;

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

            p {
                color: #9a9a9a;
                margin-bottom: 0;
            }
        }

        .hover {
            .hover-one,
            .hover-two,
            .hover-three,
            .hover-four {
                position: absolute;
                left: 0;
                width: 100%;
                height: 25%;
                background: $white;
                opacity: 0;
                z-index: 1;

                -webkit-transition: all 0.35s ease;
                -o-transition: all 0.35s ease;
                -moz-transition: all 0.35s ease;
                transition: all 0.35s ease;

                -webkit-transform: scaleY(0);
                -moz-transform: scaleY(0);
                -ms-transform: scaleY(0);
                -o-transform: scaleY(0);
                transform: scaleY(0);
            }

            .hover-one {
                top: 0;
                border-radius: 5px 5px 0 0;

                -webkit-transition-delay: 0.25s;
                -moz-transition-delay: 0.25s;
                -o-transition-delay: 0.25s;
                transition-delay: 0.25s;
            }

            .hover-two {
                top: 25%;

                -webkit-transition-delay: 0.105s;
                -moz-transition-delay: 0.105s;
                -o-transition-delay: 0.105s;
                transition-delay: 0.105s;
            }

            .hover-three {
                top: 50%;

                -webkit-transition-delay: 0.105s;
                -moz-transition-delay: 0.105s;
                -o-transition-delay: 0.105s;
                transition-delay: 0.105s;
            }

            .hover-four {
                top: 75%;
                border-radius: 0 0 5px 5px;

                -webkit-transition-delay: 0s;
                -moz-transition-delay: 0s;
                -o-transition-delay: 0s;
                transition-delay: 0s;
            }
        }
    }
}



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

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

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

        .border {right: auto;}
    }

    .team-carousel {
        position: relative;

        .team-wrapper {
            .caption {
                position: relative;

                &:hover {
                    &::before {
                        opacity: 1;
                        -webkit-transform: scale(1, 1);
                        -moz-transform: scale(1, 1);
                        -ms-transform: scale(1, 1);
                        -o-transform: scale(1, 1);
                        transform: scale(1, 1);
                    }

                    .hover-view  {
                        li {
                            opacity: 1;

                            &:nth-child(1) {transform: translateY(0);}

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

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

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(9, 42, 72, 0.75);
                    opacity: 0;
                    z-index: 1;

                    @include transition(.5s);

                    -webkit-transform: scale(1,0.5);
                    -moz-transform: scale(1,0.5);
                    -ms-transform: scale(1,0.5);
                    -o-transform: scale(1,0.5);
                    transform: scale(1,0.5);
                }

                .hover-view {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                    width: 100%;
                    text-align: center;
                    margin-top: -8px;

                    li {
                        position: relative;
                        display: inline-block;
                        margin-right: 15px;
                        opacity: 0;
                        z-index: 5;

                        @include transition(.5s);

                        &:nth-child(1) {transform: translateY(10px);}

                        &:nth-child(2) {
                            transform: translateY(20px);
                            transition-delay: .1s;
                        }

                        &:nth-child(3) {
                            transform: translateY(40px);
                            transition-delay: .2s;
                        }

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

                        i {
                            
                            font-size: 24px;
                            color: $white;
                            

                            @include transition(.5s);

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

            .contact-wrapper {
                margin-top: 20px;

                h4 {
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 34px;
                    margin-bottom: -4px;

                    a {
                        color: #222222;

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

                .position {
                    font-size: 14px;
                    font-weight: 500;
                    color: #999999;
                }

                p {
                    color: #6a6a6a;
                    margin: 10px 0 0;
                }
            }
        }

        .owl-nav {
            position: absolute;
            top: -113px;
            right: 0;
            margin: 0;

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

            .owl-prev,
            .owl-next {
                background: $theme-color;
                border-radius: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                padding: 0;
                margin: 0;

                @include transition(.5s);

                &:hover {background: $nav-blue;}

                i {
                    font-size: 11px;
                }
            }

            .owl-prev {margin-right: 3px;}
        }
    }

    .link {
        margin-top: 90px;

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

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

        .btn {
            padding: 10px 36px;

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




/* =========================================================
        Thinking-Section STYLE 
============================================================ */

.thinking-section {
    .thinking-content {
        h3 {
            position: relative;
            font-size: 36px;
            font-weight: 600;
            line-height: 42px;
            color: #333333;
            padding-bottom: 20px;
            margin-bottom: 30px;

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

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

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

            }

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

        p {
            color: #6a6a6a;
            margin-bottom: 50px;

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

        .btn {
            padding: 10px 25px;

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

            @media only screen and (max-width: 767px){font-size: 14px;padding: 8px 15px;}

            a {color: $white;}
        }
    }

    .caption {
        img {
            max-width: 100%;
            margin-top: -45px;

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



/* =========================================================
        Secure-Section STYLE 
============================================================ */

.secure-section {
    background: url(../images/secure-bg.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    padding: 80px 0;

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

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

    h2 {
        font-size: 36px;
        font-weight: 600;
        line-height: 48px;
        color: $white;
        display: inline-block;
        margin-bottom: 0;

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

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

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

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

    .btn {
        padding: 10px 31px;

        &:hover {background-color: $nav-blue;}

        a {color: $white;}

        &::before {display: none;}

        @media only screen and (max-width: 1200px) {
            float: none!important;
            margin-top: 30px;
        }

        @media only screen and (max-width: 991px){
            margin-top: 20px;
            padding: 8px 25px;
        }

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

        @media only screen and (max-width: 479px){
            font-size: 12px;
            margin-top: 15px;
            padding: 5px 15px;
        }
    }
}




/* =========================================================
        Pricing-Section STYLE 
============================================================ */

.pricing-section {
    .section-title {margin-bottom: 38px;}

    .priceing-wrapper {
        text-align: center;

        .nav-tabs {
            border: 1px solid $theme-color;
            border-radius: 5px;
            display: inline-block;
            margin-bottom: 75px;

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

            li {
                font-size: 16px;
                font-weight: 600;
                float: none;
                display: inline-block;

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

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

                    a {color: $white;}
                }

                &:first-child {
                    border-radius: 5px 0 0 5px;

                    @media only screen and (max-width: 310px) {border-radius: 5px 5px 0 0;}
                }

                &:last-child {
                    border-radius: 0 5px 5px 0;

                    @media only screen and (max-width: 310px) {border-radius: 0 0 5px 5px;}
                }

                a {
                    color: $theme-color;
                    background-color: transparent;
                    padding: 14px 78px;
                    border: 0;
                    margin: 0;

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

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

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

        .tab-content {
            .pricing-wrapper {
                border-radius: 5px;

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

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

                .header {
                    position: relative;
                    background-color: $nav-blue;
                    border-radius: 5px 5px 0 0;
                    padding: 45px 0;
                    overflow: hidden;

                    .discount {
                        position: absolute;
                        top: 12px;
                        right: -32px;
                        font-size: 14px;
                        text-transform: uppercase;
                        color: $white;
                        background-color: #fd3e03;
                        padding: 0 30px;

                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                    }

                    .promotion {
                        font-size: 24px;
                        font-weight: 600;
                        line-height: 27px;
                        color: $theme-color;
                    }

                    .rate {
                        padding: 22px 0;

                        sup {
                            font-size: 20px;
                            font-weight: 600;
                            color: $white;
                        }

                        .price {
                            font-size: 48px;
                            font-weight: 600;
                            color: $white;
                        }
                    }

                    .sign {
                        font-size: 16px;
                        padding: 7px 55px;

                        &::before {display: none;}

                        &:hover {color: $nav-blue;}
                    }
                }

                .bottom {
                    box-shadow: 0 10px 10px #e8e8e8;

                    .pricing-detail {
                        margin: 38px 0 0;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #d9d9d9;
                            
                        li {
                            font-size: 14px;
                            color: #6a6a6a;
                            margin-bottom: 18px;

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

                            i {color: $theme-color;}
                        }
                    }

                    .saveings {
                        font-size: 14px;
                        line-height: 58px;
                        color: $theme-color;

                        .bold {
                            font-size: 18px;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
}




/* =========================================================
        Working-Section STYLE 
============================================================ */

.working-section {

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

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

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

    .section-wrapper {
        .wrapper-content {
            h4 {
                font-size: 30px;
                font-weight: 500;
                line-height: 36px;
                color: #333333;
                margin-bottom: 28px;

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

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

            p {
                line-height: 25px;
                margin-bottom: 28px;

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

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

            .btn {
                border-radius: 25px;
                margin-top: 22px;
                padding: 9px 38px;

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

                @media only screen and (max-width: 767px){font-size: 14px;padding: 7px 15px;}
            }
        }

        .video-wrapper {
            margin-left: 60px;

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

            @media only screen and (max-width: 767px){margin: 30px 0 0;}
            
            video {width: 100%;}
        }
    }

    .working-wrapper {
        .wrapper-content {
            p {
                font-size: 18px;
                line-height: 30px;
                color: #999999;

                strong {
                    font-size: 30px;
                    letter-spacing: 1px;
                    color: #333333;
                }
            }

            h4 {color: #0d1d36;}

            .btn {
                margin-top: 22px;
                color: $white;
                background-color: #0d1d36;

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

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

        #working-carousel {
            overflow: hidden;

            .carousel-inner {
                img {width: 100%;}
            }

            &:hover .carousel-control.left {transform: translateX(20px);}
            &:hover .carousel-control.right {transform: translateX(-20px);}

            .carousel-control {
                &.left {transform: translateX(-50px);}

                &.right {transform: translateX(50px);}

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

                    i {
                        font-size: 25px;
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        color: #0d1d36;
                        border-radius: 50%;
                        background-color: $white;
                        @include transition(.5s);

                        &:hover {
                            color: $white;
                            background-color: #0d1d36;
                        }
                    }
                }
            }
        }
    }

    .working-section-two {
        h2 {
            position: relative;
            margin-bottom: 53px;

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

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

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

            &::before {
                content: "";
                position: absolute;
                width: 80px;
                height: 2px;
                right: 21px;
                bottom: 7px;
                background-color: $theme-color;

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

        p {
            font-size: 20px;
            line-height: 30px;
            color: #999999;

            @media only screen and (max-width: 991px){margin-bottom: 50px;font-size: 18px;line-height: 27px;}

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

        .wrapper-content {
            img {
                width: 100%;
            }

            h3 {
                position: relative;
                font-size: 24px;
                line-height: 36px;
                border-bottom: 2px solid #d8d8d8;
                margin: 22px 0;
                padding-bottom: 22px;

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

                    @include transition(.5s);
                }

                @media (min-width : 768px) and (max-width : 991px) {font-size: 20px;line-height: 25px;}

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

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

            &:hover h3::before {width: 100%;}

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

                i {
                    transform: rotate(90deg);
                }

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

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

        .first-part {margin-bottom: 40px;}
    }
}





/* =========================================================
        Finance-Section STYLE 
============================================================ */

.finance-section {
    .section-title {
        margin-bottom: 65px;

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


    .finance-wrapper {
        position: relative;
        padding: 50px 0 65px;
        overflow: hidden;

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

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

        &.wrapper-one {
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(../images/f-bg.jpg) no-repeat;
                opacity: 0;
                visibility: hidden;
                z-index: -1;
                @include transition(1s);

                animation: cloud-animationn 45s linear infinite;
                -ms-animation: cloud-animationn 45s linear infinite;
                -moz-animation: cloud-animationn 45s linear infinite;
                -webkit-animation: cloud-animationn 45s linear infinite;

                @-webkit-keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }

                @keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }
            }
        }

        &.wrapper-two {
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 440px;
                background: url(../images/f3-bg.jpg) no-repeat;
                opacity: 0;
                visibility: hidden;
                z-index: -1;
                @include transition(1s);

                animation: cloud-animationn 45s linear infinite;
                -ms-animation: cloud-animationn 45s linear infinite;
                -moz-animation: cloud-animationn 45s linear infinite;
                -webkit-animation: cloud-animationn 45s linear infinite;

                @-webkit-keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }

                @keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }
            }
        }

        &.wrapper-three {
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(../images/f2-bg.jpg) no-repeat;
                opacity: 0;
                visibility: hidden;
                z-index: -1;
                @include transition(1s);

                animation: cloud-animationn 45s linear infinite;
                -ms-animation: cloud-animationn 45s linear infinite;
                -moz-animation: cloud-animationn 45s linear infinite;
                -webkit-animation: cloud-animationn 45s linear infinite;

                @-webkit-keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }

                @keyframes cloud-animationn {
                    from {
                        background-position: 0 0;
                    }

                    to {
                        background-position: 100% 0;
                    };
                }
            }
        }

        &:hover {
            &.wrapper-one::before,
            &.wrapper-two::before,
            &.wrapper-three::before {
                opacity: 1;
                visibility: visible;
            }

            .link {
                color: $white;
                background-color: $theme-color;
            }
        }

        .caption {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: $theme-color;
            margin: 0 auto;
            @include transition(.5s);

            img {
                padding-top: 18px;
            }

            .hover-icon {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                opacity: 0;
                visibility: hidden;
                @include transition(.5s);
            }

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

                img {
                    width: 20px;
                    padding-top: 15px;
                }
            }
        }

        &:hover .caption {
            background-color: $white;

            .hover-icon {
                opacity: 1;
                visibility: visible;
            }
        }

        h3 {
            font-size: 24px;
            font-weight: 500;
            color: #0d1d36;
            margin: 32px 0 17px;
            @include transition(.5s);

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

            @media only screen and (max-width: 479px) {
                font-size: 18px;
                line-height: 27px;
                margin: 10px 0 5px;
            }
        }

        &:hover h3 {color: $white;}

        p {
            font-size: 15px;
            line-height: 25px;
            color: #6a6a6a;
            margin-bottom: 47px;
            padding: 0 48px;
            @include transition(.5s);

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

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

        &:hover p {color: $white;}

        .link {
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            color: $theme-color;
            border: 1px solid $theme-color;
            border-radius: 25px;
            padding: 9px 28px;

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




/* =========================================================
        Map-Section STYLE 
============================================================ */

.map-section {
    #googleMap {
        height: 425px;

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

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




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

.contact-section {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 505px;
        background-color: #f3f3f3;
    }

    .contact-wrapper {
        padding: 85px 100px 55px;
        box-shadow: 0 0 15px #d6d5d5;

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

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

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

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

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

            h2 {
                font-weight: 500;
                color: #222222;
                margin-bottom: 15px;
            }

            p {
                color: #666666;
            }
        }

        .form-section {
            .contact-form {
                .form-group {
                    .form-control {
                        font-size: 16px;
                        color: #8f969e;
                        background-color: #eef1f5;
                        border: 0;
                        box-shadow: none;
                        border-radius: 5px;
                        padding: 22px 30px;

                        &:focus {border: 0;}

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

                    .btn {
                        width: 100%;

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

        .location {
            margin: 15px 0 0 20px;

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

            li {
                margin-bottom: 15px;

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

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

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

                .text {
                    font-size: 18px;
                    line-height: 34px;
                    color: #7c828b;
                    margin-left: 45px;

                    @media only screen and (max-width: 479px) {
                        font-size: 16px;
                        line-height: 27px;
                        margin-left: 35px;
                    }
                }
            }
        }
    }

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

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

    .contact-left-bar {
        position: relative;
        background: rgba(24, 65, 106, 0.96);
        padding: 70px 55px 65px;
        border-radius: 8px;
        margin: -55px 0 0;
        z-index: 5;

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

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

        .header {
            font-size: 18px;
            font-weight: 500;
            line-height: 34px;
            color: $theme-color;
        }

        h4 {
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            color: $white;
            margin: 8px 0;

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

        p {
            font-size: 15px;
            color: #9daab8;
        }

        .contact-form {
            margin-top: 42px;

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

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

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

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


            .form-group {
                .form-control {
                    font-size: 14px;
                    border: 0;
                    border-radius: 5px;
                    padding: 22px 25px;

                    &::placeholder {color: #8f969e;}
                }

                .submitBtn {
                    font-size: 16px;
                    font-weight: 500;
                    width: 100%;
                    border: 0;
                    border-radius: 5px;
                    padding: 7px 25px;
                    color: $white;
                    background: $theme-color;
                }
            }

            .selection {
                .dropdown-select {
                    width: 100%;
                    color: #8f969e;
                    border: 0;
                    border-radius: 5px;
                    padding: 10px 20px;
                    margin-bottom: 15px;
                }
            }
        }
    }

    .contact-right-bar {
        img {
            margin-top: -175px;
            margin-left: -145px;
            z-index: 1;
        }
    }
}



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

.news-section {
    .section-title {
        margin-bottom: 58px;

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

    .news-wrapper {
        &.middle-wrapper {
            @media (min-width : 768px) and (max-width : 991px) {margin-bottom: 30px;}
        }

        &.last-wrapper {
            @media (min-width : 768px) and (max-width : 991px) {
                display: flex;

                .news-content {
                    flex: 1;
                    padding: 28px 32px 20px;

                    &.size-changer {margin-bottom: 0;}

                    &:first-child {margin-right: 15px;}

                    &:last-child {margin-left: 15px;}
                }
            }
        }

        img {
            max-width: 100%;

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

        .news-content {
            border: 1px solid #dee0e1;
            padding: 35px 32px 42px;

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

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

            &.size-changer {
                padding: 28px 32px 20px;
                margin-bottom: 25px;

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

                &:last-child {
                    margin-bottom: 0;

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

            h4 {
                font-size: 22px;
                font-weight: 500;
                line-height: 30px;
                margin-bottom: 10px;

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

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

                a {
                    color: #222222;

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

            p {
                font-size: 14px;
                line-height: 24px;
                color: #828282;
                margin-bottom: 24px;
            }

            .date {
                font-size: 14px;
                line-height: 24px;
                color: #222222;
                text-transform: uppercase;
            }

            .tag {
                font-size: 14px;
                line-height: 24px;
                text-transform: uppercase;
            }
        }

        .video-content {
            position: relative;

            .link {
                position: absolute;
                top: 20PX;
                left: 30PX;
                font-size: 18px;
                font-weight: 500;
                text-transform: uppercase;
                margin: 0;
                
                i {
                    font-size: 9px;
                    border-radius: 50%;
                    color: #7891a9;
                    background-color: #FFFFFF;
                    margin-right: 5px;
                    width: 18px;
                    height: 18px;
                    line-height: 18px;
                    text-align: center;
                    padding-left: 2px;
                    vertical-align: middle;

                    @include transition(.5s);
                }

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

                a {
                    color: $white;

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

            .news-content {
                position: absolute;
                bottom: 0;
                left: 0;
                border: 0;
                padding: 35px 32px 26px;

                h4 {
                    a {
                        color: $white;

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

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

                .date {color: $white;}

                .tag {
                    a:hover {color: $white;}
                }
            }
        }
    }

    .link {
        margin-top: 72px;

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

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

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

        .btn {
            padding: 9px 40px;

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

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



/* =========================================================
        Startup STYLE 
============================================================ */

.startup-section {
    .header {
        h2 {
            position: relative;
            font-size: 36px;
            font-weight: 600;
            line-height: 40px;
            color: #031633;
            display: inline-block;
            margin-bottom: 57px;

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

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

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

            &::before {
                content: "";
                position: absolute;
                width: 75px;
                height: 4px;
                left: 60px;
                bottom: 15px;
                background-color: $theme-color;

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

        p {
            line-height: 25px;

            @media only screen and (max-width: 767px){
                margin-bottom: 50px;
                font-size: 13px;
                line-height: 24px;
            }

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

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

        .caption {
            position: relative;
            img {width: 100%;}

            .hover-view {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                width: 60px;
                height: 60px;
                line-height: 60px;
                background-color: $theme-color;
                border-radius: 50%;
                text-align: center;
                opacity: 0;
                margin: -30px auto 0;
                z-index: 5;
                @incude transition(.3s);

                -webkit-transition-delay: .5s;
                -moz-transition-delay: .5s;
                -o-transition-delay: .5s;
                transition-delay: .5s;

                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -ms-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);

                img {width: auto;}
            }

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

                    -webkit-transform: scale(1);
                    -moz-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
                }

                .border {
                    .border-one,
                    .border-two,
                    .border-three,
                    .border-four {
                        opacity: 1;

                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -ms-transform: scale(1);
                        -o-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            .border {
                .border-one,
                .border-two,
                .border-three,
                .border-four {
                    position: absolute;
                    height: 25%;
                    width: 100%;
                    left: 0;
                    background-color: rgba(9, 42, 72, 0.95);

                    -webkit-transition: all 0.35s ease;
                    -o-transition: all 0.35s ease;
                    -moz-transition: all 0.35s ease;
                    transition: all 0.35s ease;

                    -webkit-transform: scaleX(0);
                    -moz-transform: scaleX(0);
                    -ms-transform: scaleX(0);
                    -o-transform: scaleX(0);
                    transform: scaleX(0);

                    z-index: 1;
                }

                .border-one {
                    top: 0;

                    -webkit-transition-delay: 0.35s;
                    -moz-transition-delay: 0.35s;
                    -o-transition-delay: 0.35s;
                    transition-delay: 0.35s;
                }

                .border-two {
                    top: 25%;

                    -webkit-transition-delay: 0.21s;
                    -moz-transition-delay: 0.21s;
                    -o-transition-delay: 0.21s;
                    transition-delay: 0.21s;
                }

                .border-three {
                    top: 50%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .border-four {
                    top: 75%;

                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }
            }
        }

        h3 {
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            color: #031633;
            margin: 22px 0 8px;

            @media (min-width : 768px) and (max-width : 991px) {font-size: 20px;line-height: 25px;}

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

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

        p {
            position: relative;
            line-height: 25px;
            border-bottom: 1px solid #d8d8d8;
            margin-bottom: 13px;
            padding-bottom: 30px;

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

                @include transition(1s);
            }
        }

        &:hover p::before {width: 100%;}

        .link {
            font-size: 18px;
            line-height: 15px;
            font-weight: 500;

            i {
                transform: rotate(90deg);
            }

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

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

    .first-part {margin-bottom: 40px;}
}




/* =========================================================
        Research-Section STYLE 
============================================================ */

.research-section {
    background-color: #f2f2f2;

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

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

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

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

        .border-2 {
            right: auto;

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

    #research-carousel {
        .carousel-inner {
            background-color: $white;
            box-shadow: 0 0 10px 0px rgba(64, 64, 64, 0.12);
            
            .carousel-wrapper {
                padding: 50px 40px 75px 55px;

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

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

                img {
                    width: 55px;
                    height: 55px;
                    border-radius: 50%;
                    float: left;

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

                .content {
                    margin-left: 80px;

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

                    h3 {
                        font-size: 24px;
                        font-weight: 500;
                        color: #031633;
                        letter-spacing: -.5px;
                        margin: 8px 0 2px;
                    }

                    .position {
                        font-size: 14px;
                        font-weight: 500;
                        color: #9a9a9a;
                    }

                    p {
                        font-weight: 300;
                        line-height: 25px;
                        margin: 11px 0 20px;
                    }

                    ul>li{
                        display: inline-block;
                        margin: 7px 2px 0;

                        i {
                            font-size: 25px;
                            color: #faaf0e;
                        }
                    } 
                }
            }
        }

        .carousel-control {
            &.left,
            &.right {
                background-image: none;
                opacity: 1;
                width: 40px;
                height: 30px;
                top: auto;
                bottom: 8px;

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

        .link {
            .btn {
                padding: 11px 30px;
                margin-top: 45px;

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

                i {margin-right: 5px;}
            }
        }
    }

    .research-content {
        @media only screen and (max-width: 991px){
            margin-top: 50px;
        }

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

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

            h2 {margin-bottom: 10px;}

            p {
                font-size: 18px;
                line-height: 30px;
                color: #999999;

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

        .accordion-content {
            .ui-accordion-header {
                position: relative;
                font-size: 18px;
                font-weight: 500;
                color: #031633;
                background-color: $white;
                border-radius: 25px;
                padding: 13px 33px;
                margin-bottom: 0;
                margin-top: 14px;
                cursor: pointer;
                box-shadow: 0 0 10px 0px rgba(64, 64, 64, 0.12);

                @media only screen and (max-width: 479px) {
                    font-size: 16px;
                    line-height: 24px;
                    padding: 13px 40px 13px 15px;
                }

                &:focus {outline: none;}

                &::before {
                    content: "\f055";
                    font-family: "FontAwesome";
                    position: absolute;
                    top: 50%;
                    right: 35px;
                    width: 15px;
                    height: 15px;
                    font-size: 20px;
                    color: $theme-color;
                    margin-top: -14px;

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

                &.ui-accordion-header-active {
                    &::before {content: "\f056";}
                }
            }

            .ui-accordion-content {
                padding: 22px 30px 0;

                p {
                    font-weight: 300;
                    margin-bottom: 0;
                }
            }
        }
    }
}



/* =========================================================
        Signup-Section STYLE 
============================================================ */

.signup-section {
    background: url(../images/signup-bg.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;

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

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

    @media only screen and (max-width: 550px) {background-attachment: inherit;}

    .contact-wrapper {
        margin-top: 85px;

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

        h3 {
            font-size: 30px;
            font-weight: 400;
            line-height: 42px;
            color: $white;
            margin-bottom: 23px;

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

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

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

            span {font-weight: 600;}
        }

        .signupForm {
            .form-wrapper {
                position: relative;

                .searchBar {
                    width: 100%;
                    border-radius: 25px;
                    border: 0;
                    background: $white;
                    box-shadow: none;
                    padding: 15px 30px;
                    font-size: 16px;
                    font-weight: 400;

                    &::placeholder {color: #4e5860;}

                    &:focus {border: 0;outline: none;}

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

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

                .subscribeBtn {
                    &.btn-primary {
                        position: absolute;
                        top: 0;
                        right: 0;
                        border: 0;
                        border-radius: 25px;
                        font-size: 18px;
                        font-weight: 600;
                        color: $white;
                        background: $theme-color;
                        height: 100%;
                        padding: 0 50px;
                        margin: 0;

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

                        &::before {display: none;}
                    }
                }
            }
        }
    }

    .caption {
        img {
            max-width: 100%;
            margin-top: -60px;
        }
    }
}



/* =========================================================
        Finance-Service-Section STYLE 
============================================================ */

.finance-service-section {
    .section-title {
        margin-bottom: 50px;

        .link {
            font-size: 18px;
            font-weight: 600;
        }
    }

    .finance-carousel {
        .finance-wrapper {
            position: relative;
            box-shadow: 0 0 10px #e0e0e0;
            margin: 35px 5px 5px 5px;

            &:hover {
                    .border {
                    .border-one,
                    .border-two,
                    .border-three,
                    .border-four {
                        opacity: 1;
                        transform: scale(1); 
                    }
                }
            }

            .icon {
                position: relative;
                width: 60px;
                height: 60px;
                background: $theme-color;
                border-radius: 50%;
                margin: 0 auto;
                transform: translateY(-33px);
                box-shadow: 0 2px 10px #cccccc;
                z-index: 5;

                img {
                    width: auto;
                    padding: 15px 0;
                    margin: 0 auto;
                }
            }

            .wrapper-content {
                h4 {
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 26px;
                    margin: -17px 0 7px;

                    a {
                        color: #222222;

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

                p {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 22px;
                    color: #8a8a8a;
                    padding: 0 40px 28px;
                    margin-bottom: 0;
                }
            }

            .border {
                .border-one,
                .border-two,
                .border-three,
                .border-four {
                    position: absolute;
                    background: $theme-color;
                    opacity: 0;

                    @include transition(.5s);
                }

                .border-one {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;

                    transform: scale(0,1);
                }

                .border-two {
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;

                    transform: scale(1,0);
                }

                .border-three {
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;

                    transform: scale(0,1);
                }

                .border-four {
                    top: 0;
                    left: 0;
                    width: 1px;
                    height: 100%;

                    transform: scale(1,0);
                }
            }
        }

        .owl-nav {
            margin-top: 40px;

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

            .owl-prev,
            .owl-next {
                width: 34px;
                height: 34px;
                line-height: 30px;
                border: 2px solid $theme-color;
                background: transparent;
                padding: 0;
                border-radius: 0;
                @include transition(.5s);

                &:hover {
                    background: $nav-blue;
                    border: 2px solid $nav-blue;
                }

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



/* =========================================================
        Company-Section STYLE 
============================================================ */

.company-section {
    background: #ebeef0;

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

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

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

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

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

    .section-leftbar {
        h4 {
            font-size: 26px;
            font-weight: 500;
            line-height: 38px;
            color: #222222;

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

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

        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 26px;
            color: #8a8a8a;
            margin-bottom: 0;
        }

        .progressContent {
            position: relative;
            margin-top: 40px;

            .progressSection {
                .title {
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 30px;
                    text-transform: uppercase;
                    color: #222222;

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

                .progress {
                    position: relative;
                    height: 20px;
                    box-shadow: none;
                    background-color: $nav-blue;
                    border: 0;
                    border-radius: 25px;
                    overflow: visible;
                    margin: 11px 0 17px;

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

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

                    .progress-percent {
                        top: -40px;
                        margin-left: -28px;
                    }

                    .progress-bar {
                        box-shadow: none;
                        text-align: right;
                        height: 20px;
                        border-radius: 15px;
                        background-image: none;
                        background: $theme-color;

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

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

                        .progress-percent {
                            font-size: 18px;
                            font-weight: 500;
                            position: absolute;  
                            padding: 4px 6px;
                            border-radius: 5px;
                            color: #222222;

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

    .section-rightbar {
        margin-left: 40px;

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

        h4 {
            font-size: 24px;
            font-weight: 500;
            line-height: 26px;
            color: #222222;
            margin: 0 0 15px 23px;

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

        p {
            margin-left: 23px;
        }

        img {
            max-width: 100%;
        }
    }
}



/* =========================================================
        Multi-Section STYLE 
============================================================ */

.multi-section {
    .faq-content {
        h2 {
            font-size: 30px;
            font-weight: 500;
            line-height: 30px;
            color: #222222;
            margin-bottom: 65px;

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

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

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

        .accordion-content {
            .ui-accordion-header {
                position: relative;
                font-size: 18px;
                font-weight: 500;
                color: #031633;
                background-color: $white;
                padding: 13px 33px;
                margin-bottom: 0;
                margin-top: 14px;
                cursor: pointer;
                border: 1px solid #dee0e1;

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

                @media only screen and (max-width: 479px) {
                    font-size: 16px;
                    line-height: 24px;
                    padding: 13px 40px 13px 15px;
                }

                &:focus {outline: none;}

                &::before {
                    content: "\f107";
                    font-family: "FontAwesome";
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                    font-size: 20px;
                    color: #222222;
                    margin-top: -5px;

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

                &.ui-accordion-header-active {
                    border-color: $theme-color;

                    &::before {content: "\f106";}
                }
            }

            .ui-accordion-content {
                padding: 25px 35px 35px;
                border: 1px solid #dee0e1;

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

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

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

                @media only screen and (max-width: 450px){padding: 25px 20px 50px;}

                p {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 26px;
                    color: #828282;
                    word-break: break-all;
                    margin-bottom: 0;
                }
            }
        }
    }

    .client-section {

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

        h3 {
            font-size: 30px;
            font-weight: 500;
            line-height: 30px;
            color: #222222;
            margin: 0 0 47px 28px;

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

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

        .logo {
            li {
                display: inline-block;
                margin: 0 15px 10px;
            }
        }
    }
}




/* =========================================================
        Achievement-Section STYLE 
============================================================ */

.achievement-section {
    .section-title {
        margin-bottom: 60px;

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

    .achievement-slide {
        position: relative;

        .owl-item {
            opacity: 0.3;
            @include transition(.5s);

            &.active {opacity: 1;}
        }

        .carousel-wrapper {
            @media only screen and (max-width: 767px){text-align: center;}

            .caption {
                margin-right: 30px;

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

                img {width: 100%;}
            }

            .content {
                margin-top: 60px;

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

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

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

                h3 {
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 26px;
                    color: #222222;
                    margin-bottom: 16px;

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

                p {
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 26px;
                    color: #8a8a8a;

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

        .owl-dots {
            position: absolute;
            bottom: auto;
            top: 60px;
            width: auto;
            left: auto;
            right: 0;
            margin: 0;

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

            @media only screen and (max-width: 991px){
                top: auto;
                bottom: 0;
                left: 0;
                margin: 0 auto;
                text-align: center;
            }
            .owl-dot {
                width: 75px;
                height: 60px;
                display: block;
                margin: 0 0 10px 0;

                &:nth-child(1) {
                    background: url(../images/achivement/s2.jpg) no-repeat;
                }

                &:nth-child(2) {
                    background: url(../images/achivement/s1.jpg) no-repeat;
                }

                &:nth-child(3) {
                    background: url(../images/achivement/s3.jpg) no-repeat;
                }

                &:nth-child(4) {
                    background: url(../images/achivement/s4.jpg) no-repeat;
                }

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




/* =========================================================
        About-Company-Section STYLE 
============================================================ */

.about-Company-Section {
    background: url(../images/about-company-bg.jpg) no-repeat center top;
    background-size: cover;

    .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;}

        h2 {color: #222222;}
    }

    .content-wrapper {
        h3 {
            font-size: 26px;
            font-weight: 500;
            line-height: 38px;
            color: #222222;
            margin-bottom: 30px;

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

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

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

        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 26px;
            color: $white;
            margin-bottom: 35px;

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

        .content {
            li {
                @media only screen and (max-width: 479px) {margin-bottom: 5px;}

                img {
                    float: left;
                    margin-top: 8px;

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

                .single-content {
                    font-size: 18px;
                    font-weight: 300;
                    line-height: 48px;
                    color: $white;
                    margin-left: 45px;

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

    .faq-content {
        margin-top: 35px;

        h3 {
            font-size: 26px;
            font-weight: 500;
            line-height: 30px;
            color: #222222;
            margin-bottom: 40px;

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

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

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

        .accordion-content {
            .ui-accordion-header {
                position: relative;
                font-size: 18px;
                font-weight: 500;
                line-height: 30px;
                color: #222222;
                background-color: $white;
                padding: 13px 33px;
                margin-bottom: 0;
                margin-top: 10px;
                cursor: pointer;
                border-bottom: 2px solid $theme-color;

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

                @media only screen and (max-width: 479px) {
                    font-size: 16px;
                    line-height: 24px;
                    padding: 13px 40px 13px 15px;
                }

                &:focus {outline: none;}

                &::before {
                    content: "\f107";
                    font-family: "FontAwesome";
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                    font-size: 20px;
                    color: #222222;
                    margin-top: -5px;

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

                &.ui-accordion-header-active {
                    color: $theme-color;

                    &::before {
                        content: "\f106";
                        color: $theme-color;
                    }
                }
            }

            .ui-accordion-content {
                padding: 25px 35px 35px;
                background: $white;

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

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

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

                @media only screen and (max-width: 450px){padding: 25px 20px 50px;}

                p {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 26px;
                    color: #828282;
                    word-break: break-all;
                    margin-bottom: 0;
                }
            }
        }
    }

    .quote-section {
        position: relative;

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

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: -50px;
            width: 100%;
            height: 4px;
            background: $black;

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

        h3 {
            font-size: 26px;
            font-weight: 500;
            line-height: 38px;
            color: #222222;
            margin-bottom: 40px;

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

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

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

        .contact-form {
            .form-group {
                position: relative;
                margin-bottom: 25px;

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

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

                i {
                    position: absolute;
                    top: 12px;
                    left: 0;
                    font-size: 22px;
                    color: #848484;

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

                .form-control {
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 38px;
                    color: #848484;
                    border: 0;
                    border-radius: 0;
                    border-bottom: 1px solid #848484;
                    background-color: transparent;
                    box-shadow: none;
                    padding: 22px 35px;

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

                    &.form-message {
                        padding: 5px 35px;
                    }
                }

                .btn {
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 38px;
                    color: #e8f0f3;
                    border-radius: 0;
                    display: block;
                    width: 100%;
                    margin-top: 32px;

                    &:before {border-radius: 0;}

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




/* =========================================================
        Right-Choice-Section STYLE 
============================================================ */

.right-choice-section {

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

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

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

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

    .section-wrapper {
        margin-bottom: 30px;

        .caption {
            position: relative;

            &:hover {
                .hover-view {
                    opacity: 1;
                    transform: translateY(0);
                }

                .hover {
                    .hover-one,
                    .hover-two,
                    .hover-three,
                    .hover-four {
                        opacity: 1;

                        -webkit-transform: translate(0, 0) scale(1);
                        -moz-transform: translate(0, 0) scale(1);
                        -ms-transform: translate(0, 0) scale(1);
                        -o-transform: translate(0, 0) scale(1);
                        transform: translate(0, 0) scale(1);
                    }
                }
            }

            img {width: 100%;}

            .hover-view {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                width: 150px;
                font-size: 16px;
                line-height: 26px;
                color: $white;
                border: 2px solid $white;
                padding: 8px 0;
                margin: -24px auto 0;
                opacity: 0;
                z-index: 5;
                transform: translateY(80px);
                transition-delay: .1s;

                @media only screen and (max-width: 991px) {
                    width: 100px;
                    font-size: 14px;
                    padding: 2px 0;
                    margin: -17px auto 0;
                }

                &:hover {color: #313131;}
            }

            .hover {
                .hover-one,
                .hover-two,
                .hover-three,
                .hover-four {
                    position: absolute;
                    height: 50%;
                    width: 50%;
                    background: $theme-color;
                    opacity: 0;
                    z-index: 2;

                    -webkit-transition: all 0.35s ease;
                    -o-transition: all 0.35s ease;
                    -moz-transition: all 0.35s ease;
                    transition: all 0.35s ease;
                }

                .hover-one {
                    bottom: 0;
                    left: 0;

                    -webkit-transform: translateY(-100%);
                    -moz-transform: translateY(-100%);
                    -ms-transform: translateY(-100%);
                    -o-transform: translateY(-100%);
                    transform: translateY(-100%);
                }

                .hover-two {
                    top: 0;
                    left: 0;

                    -webkit-transform: translateX(100%);
                    -moz-transform: translateX(100%);
                    -ms-transform: translateX(100%);
                    -o-transform: translateX(100%);
                    transform: translateX(100%);
                }

                .hover-three {
                    top: 0;
                    right: 0;

                    -webkit-transform: translateY(100%);
                    -moz-transform: translateY(100%);
                    -ms-transform: translateY(100%);
                    -o-transform: translateY(100%);
                    transform: translateY(100%);
                }
                
                .hover-four {
                    bottom: 0;
                    right: 0;

                    -webkit-transform: translateX(-100%);
                    -moz-transform: translateX(-100%);
                    -ms-transform: translateX(-100%);
                    -o-transform: translateX(-100%);
                    transform: translateX(-100%);
                }
            }
        }

        .content {
            box-shadow: 0 0 15px #e2e2e2;
            padding: 15px 30px 12px;

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

            h4 {
                font-size: 24px;
                font-weight: 400;
                line-height: 26px;
                color: #222222;
                margin: 14px 0;

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

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

            p {
                font-size: 14px;
                line-height: 24px;
                color: #999999;
            }
        }
    }
}




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

.video-section {
    background: url(../images/video-bg.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    padding: 170px 0;

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

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

    .video-icon {
        i {
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-size: 30px;
            color: $white;
            background: $theme-color;

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

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




/* =========================================================
        About-Office-Section STYLE 
============================================================ */

.about-office-section {
    padding-top: 45px;

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

    .content {
        margin-top: 45px;

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

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

        h3 {
            font-size: 26px;
            font-weight: 500;
            line-height: 38px;
            color: #222222;
            margin-bottom: 22px;

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

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

        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 26px;
            color: #8a8a8a;
            margin-bottom: 25px;

            @media only screen and (max-width: 767px){
                font-size: 14px;
                line-height: 24px;
                margin-bottom: 20px;
            }
        }
    }

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





/* =========================================================
        Hiring-Section STYLE 
============================================================ */

.hiring-section {
    .header-content {
        margin: 0 0 52px;

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

        .hiringForm {
            .form-wrapper {
                position: relative;

                .searchBar {
                    width: 100%;
                    padding: 0 15px;
                    border-radius: 8px;
                    border: 1px solid #7f7f7f;
                    height: 50px;
                    margin-bottom: 20px;

                    &:focus {outline: none;}

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

                .subscribeBtn {
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-radius: 8px;
                    margin: 0;
                    height: 50px;
                    font-size: 16px;
                    font-weight: 500;

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

                    &::before {border-radius: 8px;}
                }
            }
        }
    }

    .left-content {
        border-bottom: 1px solid #dcdcdc;
        padding-bottom: 45px;
        margin-bottom: 40px;

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

        &:last-child {
            border: 0;
            margin: 0;
            padding: 0;
        }

        h4 {
            font-size: 24px;
            font-weight: 500;
            line-height: 27px;
            color: $black;
            margin-bottom: 0;

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

        .small {
            font-size: 14px;
            color: #999999;
        }

        p {
            color: #606060;
            margin: 16px 0 22px;

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

        .btn {
            font-size: 16px;
            padding: 7px 38px;

            @media only screen and (max-width: 479px) {
                font-size: 14px;
                padding: 5px 22px;
            }
        }
    }

    .right-content {

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

        .caption {
            position: relative;
            margin-bottom: 50px;

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

            img {
                width: 100%;
                border-radius: 5px;
            }

            .hover-view {
                position: absolute;
                width: 60px;
                top: 50%;
                left: 0;
                right: 0;
                font-size: 60px;
                margin: -27px auto 0;
            }
        }

        h4 {
            font-size: 30px;
            font-weight: 500;
            line-height: 36px;
            color: $black;

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

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

        p {
            font-size: 18px;
            color: #606060;
            line-height: 30px;
            margin-bottom: 30px;

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

            a {font-weight: 600;}
        }

        .contact-form {
            .form-group {
                &:last-child {margin-bottom: 0;}

                .form-control {
                    width: 100%;
                    padding: 12px 15px;
                    border-radius: 8px;
                    border: 1px solid #7f7f7f;
                    height: 50px;
                    margin-bottom: 20px;
                    font-size: 16px;
                    color: #666666;

                    &:focus {outline: none;}

                    @media only screen and (max-width: 767px){
                        height: 40px;
                        margin-bottom: 10px;
                        padding: 7px 15px;
                    }

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

                .btn {
                    width: 100%;
                    border-radius: 8px;
                    margin-top: 10px;

                    &::before {border-radius: 5px;}

                    @media only screen and (max-width: 767px) {
                        padding: 6px 16px;
                        background: none;
                        -webkit-text-fill-color: #313131;
                    }
                }
            }
        }
    }
}





/* =========================================================
        Blog-Section STYLE 
============================================================ */

.blog-section {
    .first-row {
        margin-bottom: 30px;

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

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

    .blog-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;}

        img {width: 100%;}

        .caption {
            position: relative;

            &:hover {
                .video-icon {
                    &::before {
                        opacity: 0;
                        visibility: hidden;
                    }
                }
            }

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

                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background-color: rgba(0, 0, 0, 0.57);

                    @include transition(.5s);
                }

                .icon {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                    margin: -17px auto 0;
                }

                i {
                    position: relative;
                    font-size: 36px;
                    color: $white;

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

        h3 {
            font-size: 22px;
            font-weight: 500;
            line-height: 25px;
            color: $black;
            margin: 15px 0 8px;


            @media (min-width : 768px) and (max-width : 991px){
                font-size: 20px;
                line-height: 25px;
            }

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

        p {
            line-height: 27px;
            color: #6d747d;
            margin-bottom: 19px;

            @media (min-width : 768px) and (max-width : 991px){
                font-size: 15px;
                line-height: 25px;
            }

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

        .link {
            font-size: 18px;
            font-weight: 500;
            color: #313131;
            padding: 0;

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

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

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

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

        .author {
            img {
                width: auto;
                margin-right: 5px;

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

            .title {
                font-weight: 600;
                color: #8b98a4;

                @media (min-width : 768px) and (max-width : 991px){font-size: 13px;}
            }
        }

        .share {
            background: $theme-color;
            width: 100%;
            padding: 11px 20px;
            margin-top: 20px;

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

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

            li {
                display: inline-block;
                color: $white;
                margin-right: 15px;

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

                a {
                    color: $white;

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

    .link {
        margin-top: 50px;
        padding: 11px 50px;

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

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





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

.single-news-section {
    .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;

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

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

            img {width: 100%;}

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

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

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

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

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

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

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

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

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

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

                .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;

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

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

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

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

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

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

                    &: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: 80px;}
            @media only screen and (max-width: 767px){margin-bottom: 55px;}

            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;margin-bottom: 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;margin-bottom: 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;

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

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

                @media only screen and (max-width: 767px){font-size: 20px;margin-bottom: 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;}

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

        .news-wrapper {

            img {width: 100%;}

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

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

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

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

                h3 {
                    font-size: 30px;
                    font-weight: 600;
                    line-height: 35px;
                    color: #111111;
                    margin: 10px 0 7px;

                    @media only screen and (max-width: 767px){font-size: 25px;line-height: 30px;}
                    @media only screen and (max-width: 479px){font-size: 20px;line-height: 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: 600;
                    line-height: 28px;
                    color: #212121;
                    margin: 30px 0 0;                    
                }

                .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 only screen and (max-width: 479px) {margin: 25px 32px 17px 0;}
            
            .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: 10px;
                        }

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

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

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

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

                ul{
                    @media (max-width : 767px) {margin: 0;}

                    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: $link-color;
                            }

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

                            @media (max-width : 767px) {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }

        .section-bottom {
            background-color: #f6f6f6;

            .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: 767px) {
                        padding-top: 20px;
                        margin-bottom: 30px;
                    }

                    @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: #e9e8e8;
                        padding: 30px;
                        margin: 25px 0 80px 102px;

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

                        @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: 18px;
                            font-weight: 600;
                            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: text-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: 16px;
                            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 50px;

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

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

                .subscribeBtn {
                    margin-top: 30px;
                    padding: 10px 55px;

                    @media only screen and (max-width: 767px){
                        padding: 8px 50px;
                        margin-top: 0;
                        font-size: 18px;
                    }

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





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

.footer-section {
	position: relative;
	background: #061d31;

    .footer-container {
        padding: 95px 0px;

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

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

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

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

            img {
                max-width: 100%;
            }

            .location {
                margin-top: 45px;

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

                li {
                    margin-bottom: 25px;

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

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

                    i {
                        font-size: 24px;
                        color: $theme-color;
                        vertical-align: top;

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

                    .content {
                        font-size: 15px;
                        line-height: 25px;
                        color: #aaa;
                        display: inline-block;
                        margin-left: 15px;

                        @media only screen and (max-width: 991px){
                            font-size: 16px;
                            line-height: 27px;
                            margin-left: 10px;
                        }
                    }
                }
            }

            h3 {
                font-size: 24px;
                font-weight: 700;
                line-height: 30px;
                color: $white;
                text-transform: uppercase;
            }

            p {
                font-size: 14px;
                line-height: 24px;
                font-weight: 300;
                color: #aaa;
                margin-bottom: 0;
            }

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

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

                li {
                    display: inline-block;
                    font-size: 20px;
                    margin-right: 20px;

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

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

                    a {
                        color: $white;

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

            .wrapper-option {
                float: left;
                margin-top: -5px;

                li {
                    font-size: 16px;
                    line-height: 36px;

                    a {
                        color: #aaa;

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



    .copy-right {
        background-color: #061d31;
        padding: 16px 0;
        border-top: 1px solid #203548;

        p {
            font-size: 16px;
            margin-bottom: 0;

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

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



/* =========================================================
        HomePageOne-STYLE 
============================================================ */

.homePageOne {
    .header-section {
        .top-bar {
            min-height: 65px;
            line-height: 65px;

            @media only screen and (max-width: 991px){
                line-height: 35px;
                padding: 10px 0 20px;
            }

            @media only screen and (max-width: 767px){
                line-height: 35px;
                padding: 10px 0;
            }

            .header-left-bar {
                @media only screen and (max-width: 991px){text-align: center;}

                .contact-wrapper li {
                    font-size: 16px;
                    color: $white;

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

            .header-right-bar {
                margin-bottom: -20px;

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

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

                .social-icon {
                    display: inline-block;
                    vertical-align: top;

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

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

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

                        i {
                            color: $white;

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

        .navbar {
            background-color: $white;

            &.sticky {
                .navbar-inner {
                    width: auto;

                    .navbar-collapse {width: auto;}
                }
            }

            .navbar-inner {
                padding: 0 30px;
                @include transition(.5s);

                .navbar-header .navbar-brand img {padding: 22px 0;}

                .navbar-collapse {
                    margin: 0;

                    .navbar-nav {
                        margin: 0;

                        li {
                            a, .search-view, .cart-icon {
                                color: #222222;
                                line-height: 95px;
                            }

                            &.active,
                            &:hover {
                                a {color: $theme-color;}
                            }

                            .dropdown-menu,
                            &.dropdown:hover .dropdown-menu,
                            .cart-item {
                                top: 95px;
                            }

                            .dropdown-menu li a {line-height: 45px;}
                        }
                    }
                }
            }
        }
    }


    .slider-section {
        .tp-banner-container {
            .tp-banner {
                .slide-content-box {
                    h1 {
                        font-size: 55px;
                        font-weight: 600;
                        line-height: 62px;
                        color: $white;
                        margin: 14px 0 27px;

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

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

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

                    p {
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 30px;
                        color: $white;

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

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

                        @media only screen and (max-width: 767px){
                            font-size: 14px;
                            line-height: 24px;
                            word-break: break-all;
                            margin: 0 0 10px;
                        }
                    }
                }

                .button {
                    margin-top: 53px;

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

                    .btn {
                        border-radius: 0;

                        &::before {border-radius: 0;}
                    }
                }
            }
        }
    }


    .right-choice-section {
        .section-wrapper {
            margin-bottom: 0;

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


    .about-Company-Section {
        background: url(../images/about-company-bg-2.jpg) no-repeat center top;
        background-size: cover;

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

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

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

        .content-wrapper {
            margin-right: 60px;

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

            p {
                color: #848484;

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

            .content {
                margin-bottom: 22px;
                
                li .single-content {color: #848484;}    
            } 
        }
    }


    .finance-service-section {
        .section-title {
            margin-bottom: 13px;
        }

        .finance-carousel .finance-wrapper {
            box-shadow: none;
            border: 1px solid #e7e8e8;
            border-bottom: 0;

            &:hover {
                .wrapper-content {
                    position: relative;
                    z-index: 5;

                    h4 a{
                        color: $white;

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

                    p {color: $white;}
                }

                .hover {
                    .hover-one,
                    .hover-two,
                    .hover-three,
                    .hover-four {
                        opacity: 1;

                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -ms-transform: scale(1);
                        -o-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            .icon {
                background: transparent;
                box-shadow: none;
                transform: translateY(0);
                margin: 30px auto 10px;
            }

            .wrapper-content {
                border-bottom: 4px solid $theme-color;

                h4 {
                    margin: 0 0 15px;
                }

                p {
                    padding: 0 35px 38px;
                }
            }

            .hover {
                .hover-one,
                .hover-two,
                .hover-three,
                .hover-four {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 25%;
                    background: $nav-blue;
                    opacity: 0;
                    z-index: 1;

                    -webkit-transition: all 0.35s ease;
                    -o-transition: all 0.35s ease;
                    -moz-transition: all 0.35s ease;
                    transition: all 0.35s ease;

                    -webkit-transform: scaleY(0);
                    -moz-transform: scaleY(0);
                    -ms-transform: scaleY(0);
                    -o-transform: scaleY(0);
                    transform: scaleY(0);
                }

                .hover-one {
                    top: 0;

                    -webkit-transition-delay: 0.25s;
                    -moz-transition-delay: 0.25s;
                    -o-transition-delay: 0.25s;
                    transition-delay: 0.25s;
                }

                .hover-two {
                    top: 25%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-three {
                    top: 49%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-four {
                    top: 74%;

                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }
            }
        }
    }

    .news-section .link .btn,
    .project-section .link .btn {
        border-radius: 0;

        &:before {border-radius: 0;}
    }
}





/* =========================================================
        HomePageTwo-STYLE 
============================================================ */

.homePageTwo {
    .header-section {
        .topper {
            @media only screen and (max-width: 767px){
                .container {padding: 0;}
            }

            .top-bar {
                min-height: 50px;
                line-height: 50px;
                padding: 0 30px;

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

                .header-left-bar{
                    @media only screen and (max-width: 991px){text-align: center;}

                    .contact-wrapper li {
                        font-size: 16px;
                        color: $white;

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

                .header-right-bar {
                    margin-bottom: -20px;

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

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

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

                    .social-icon {
                        display: inline-block;
                        vertical-align: top;

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

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

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

                            i {
                                color: $white;

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

        .navbar {
            background-color: $white;

            &.sticky {
                .navbar-inner {
                    width: 1140px;
                    margin: 0 auto;

                    .navbar-collapse {width: auto;}
                }
            }

            .navbar-inner {
                padding: 0 30px;
                @include transition(.5s);

                .navbar-header .navbar-brand img {padding: 20px 0;}

                .navbar-collapse {
                    margin: 0;

                    .navbar-nav {
                        margin: 0;

                        li {
                            a, .search-view, .cart-icon {
                                color: #222222;
                                line-height: 90px;
                            }

                            &.active,
                            &:hover {
                                a {color: $theme-color;}
                            }

                            .dropdown-menu,
                            &.dropdown:hover .dropdown-menu,
                            .cart-item {
                                top: 90px;
                            }

                            .dropdown-menu li a {line-height: 45px;}
                        }
                    }
                }
            }
        }
    }

    .slider-section {
        .tp-banner-container {
            .tp-banner {
                .slide-content-box {
                    h1 {
                        font-size: 48px;
                        font-weight: 600;
                        line-height: 62px;
                        color: $white;

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

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

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

                    p {
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 30px;
                        color: $white;

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

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

                        @media only screen and (max-width: 767px){
                            font-size: 14px;
                            line-height: 24px;
                            word-break: break-all;
                            margin: 0 0 10px;
                        }
                    }
                }

                .button {
                    .btn {
                        border-radius: 0;

                        &::before {border-radius: 0;}
                    }
                }
            }
        }
    }

    .finance-service-section {
        .section-title {
            margin-bottom: 13px;
        }

        .finance-carousel .finance-wrapper {
            box-shadow: none;
            border: 1px solid #e7e8e8;
            border-bottom: 0;

            &:hover {
                .wrapper-content {
                    position: relative;
                    z-index: 5;

                    h4 a{
                        color: $white;

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

                    p {color: $white;}
                }

                .hover {
                    .hover-one,
                    .hover-two,
                    .hover-three,
                    .hover-four {
                        opacity: 1;

                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -ms-transform: scale(1);
                        -o-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            .icon {
                background: transparent;
                box-shadow: none;
                transform: translateY(0);
                margin: 30px auto 10px;
            }

            .wrapper-content {
                border-bottom: 4px solid $theme-color;

                h4 {
                    margin: 0 0 15px;
                }

                p {
                    padding: 0 35px 38px;
                }
            }

            .hover {
                .hover-one,
                .hover-two,
                .hover-three,
                .hover-four {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 25%;
                    background: $nav-blue;
                    opacity: 0;
                    z-index: 1;

                    -webkit-transition: all 0.35s ease;
                    -o-transition: all 0.35s ease;
                    -moz-transition: all 0.35s ease;
                    transition: all 0.35s ease;

                    -webkit-transform: scaleY(0);
                    -moz-transform: scaleY(0);
                    -ms-transform: scaleY(0);
                    -o-transform: scaleY(0);
                    transform: scaleY(0);
                }

                .hover-one {
                    top: 0;

                    -webkit-transition-delay: 0.25s;
                    -moz-transition-delay: 0.25s;
                    -o-transition-delay: 0.25s;
                    transition-delay: 0.25s;
                }

                .hover-two {
                    top: 25%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-three {
                    top: 49%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-four {
                    top: 74%;

                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }
            }
        }
    }

    .news-section .link .btn,
    .project-section .link .btn {
        border-radius: 0;

        &:before {border-radius: 0;}
    }

    .client-section {
        margin: 30px 0 20px;
    }
}




/* =========================================================
        HomePageThree-STYLE 
============================================================ */

.homePageThree {
   .header-section {
        .top-bar {
            min-height: 50px;
            line-height: 50px;

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

            .header-left-bar .contact-wrapper li {
                font-size: 16px;
                color: $white;

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

            .header-right-bar {
                margin-bottom: -20px;

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

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

                .social-icon {
                    display: inline-block;
                    vertical-align: top;

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

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

                        i {
                            color: $white;

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

        .navbar {
            background-color: transparent;
            box-shadow: 0 0 5px #8c8c8c;
            transition: .5s;

            &.sticky {
                background-color: $white;

                .navbar-collapse {
                    width: auto;
                }
            }

            .navbar-header .navbar-brand img {padding: 20px 0;}

            .navbar-collapse {
                .navbar-nav {
                    margin: 0;

                    li {
                        a, .search-view, .cart-icon {
                            color: #222222;
                            line-height: 90px;
                        }

                        &.active,
                        &:hover {
                            a {color: $theme-color;}
                        }

                        .dropdown-menu,
                        &.dropdown:hover .dropdown-menu,
                        .cart-item {
                            top: 90px;
                        }
                    }
                }
            }

        }
   }

   .slider-section .tp-banner-container .tp-banner .button .btn {border-radius: 0;}

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

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

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

        .boost-wrapper {
            &:hover {
                .boost-content {
                    padding: 52px 25px;

                    -webkit-transform: translateY(0);
                    -moz-transform: translateY(0);
                    -ms-transform: translateY(0);
                    -o-transform: translateY(0);
                    transform: translateY(0);

                    @media only screen and (max-width: 767px){
                        .wrapper-content {
                            p {opacity: 1;}
                        }
                    }
                }
            }

            .boost-content {
                padding: 15px 25px 45px 25px;

                 -webkit-transform: translateY(70%); 
                -moz-transform: translateY(70%);
                -ms-transform: translateY(70%);
                -o-transform: translateY(70%);
                transform: translateY(70%);

                .wrapper-content {
                    margin-top: 8px;

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

                        p {opacity: 0;}
                    }

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

        .owl-nav {
            margin-top: 55px;

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

            .owl-prev,
            .owl-next {
                background: transparent;
                color: #cecece;
                padding: 0;
                margin: 0 70px;

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

        .owl-dots {
            margin-top: -27px;

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

            .owl-dot {
                &.active {
                    span {background: $nav-blue;}
                }

                span {
                    margin: 0 12px;
                    background: transparent;
                    border: 1px solid $nav-blue;
                }
            }
        }
   }

   .news-section {
        background: #ebeef0;

        .news-wrapper {
            .news-content {background: $white;}

            .video-content {
                .news-content {background: transparent;}
            }
        }

        .link {
            .btn {border-radius: 0;}
        }
   }

   .project-section .link .btn {
        border-radius: 0;

        &::before {border-radius: 0;}
    }
}



/* =========================================================
        HomePageFour-STYLE 
============================================================ */

.homePageFour {
    .header-section {
        .top-bar {
            min-height: 70px;
            line-height: 70px;
            background-color: $white;
            padding-bottom: 20px;

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

            @media only screen and (max-width: 767px){
                line-height: 35px;
                padding-bottom: 10px;
            }

            .navbar-header {
                @media only screen and (max-width: 991px){
                    float: none!important;
                    padding-top: 15px;

                    .navbar-brand {
                        float: none!important;
                        padding: 0;

                        img {
                            margin: 0 auto;

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

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

            .header-left-bar {
                @media only screen and (max-width: 991px){
                    float: none!important;
                    text-align: center;
                }

                .contact-wrapper li {color: #6a6a6a;}
            }
        }

        .navbar {
            background-color: $nav-blue;
            margin-top: -14px;

            &.sticky {
                margin-top: 0;
            }

            .navbar-collapse {
                .navbar-nav {
                    margin: 0 45px;

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

                    li {
                        a,.search-view, .cart-icon {line-height: 75px;}

                        &.active,
                        &:hover {
                            a {color: $theme-color;}
                        }

                        .dropdown-menu,
                        &.dropdown:hover .dropdown-menu,
                        .cart-item {
                            top: 75px;
                        }
                    } 

                    &.social-icon {
                        li {
                            margin-right: 14px;

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

    .slider-section {
        .tp-banner-container {
            .tp-banner {
                .slide-content-box {
                    margin-top: 60px;

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

                    h1,
                    p {color: $white;}
                }
            }
        }
    }

    .working-section .section-wrapper .wrapper-content .btn {border-radius: 5px;}
}



/* =========================================================
        HomePageFive-STYLE 
============================================================ */

.homePageFive {
    .header-section {
        .top-bar {
            min-height: auto;
            line-height: 20px;
            padding: 35px 0;

            @media only screen and (max-width: 991px){
                padding: 15px 0;
                text-align: left;
            }
        }

        .navbar {
            background-color: $white;

            &.sticky {
                .navbar-collapse {
                    width: auto;
                }
            }

            .navbar-header .navbar-brand img {
                padding: 24px 0;

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

            .navbar-collapse {
                .navbar-nav {
                    @media (min-width : 992px) and (max-width : 1199px) {margin: 0 15px;}

                    li{
                        &:hover a,
                        &.active a {color: $theme-color;}
                    } 
                }

                .navbar-nav li a, 
                .navbar-nav li .cart-icon {
                    line-height: 100px;
                    color: #0d1d36;
                }

                .navbar-nav li .dropdown-menu,
                .navbar-nav li.dropdown:hover .dropdown-menu,
                .navbar-nav li .cart-item {top: 100px;}
            }
        }
    }

    .slider-section {
        .tp-banner-container {
            .tp-banner {
                .slide-content-box {
                    margin-top: 60px;

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

                    h1,
                    p {color: $white;}
                }

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

                    &::before {border-radius: 25px;}
                }
            }
        }
    }

    .working-section {
        background-color: #f2f2f2;
    }


    .service-section {
        background-color: $white;
        padding-bottom: 220px;

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

        .section-title h2 {color: $nav-blue;}

        .service-wrapper {
            &:hover {
                box-shadow: 0 0 40px #cecece;
            }

            .wrapper-content h3 a {
                color: $nav-blue;

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

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



/* =========================================================
        HomePageSix-STYLE 
============================================================ */

.homePageSix {
    .header-section .navbar {
        .navbar-collapse .navbar-nav{
            &.navbar-right {   
                margin-right: 90px;

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

    .boost-section {
        padding-top: 0;
        margin-top: -70px;

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

    .pricing-section {
        padding-bottom: 290px;

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

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




/* =========================================================
        SubPage-STYLE 
============================================================ */

.subPage {
    .header-title{
        background: url(../images/header-bg.jpg) no-repeat center top;
        background-size: cover;
        background-attachment: fixed;

        @media only screen and (max-width: 767px){background-attachment: inherit;}
    }

    .header-section {
        .top-bar {
            min-height: 50px;
            line-height: 50px;

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

            .header-left-bar .contact-wrapper li {
                font-size: 14px;
                color: $white;

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

            .header-right-bar {
                margin-bottom: -20px;

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

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

                .social-icon {
                    display: inline-block;
                    vertical-align: top;

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

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

                        i {
                            color: $white;

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

        .navbar {
            background-color: transparent;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
            transition: .5s;

            &.sticky {
                background-color: $white;

                .navbar-collapse {
                    width: auto;
                }
            }

            .navbar-header .navbar-brand img {padding: 20px 0;}

            .navbar-collapse {
                .navbar-nav {
                    margin: 0;

                    li {
                        a, .search-view, .cart-icon {
                            color: #222222;
                            line-height: 90px;
                        }

                        &.active,
                        &:hover {
                            a {color: $theme-color;}
                        }

                        .dropdown-menu,
                        &.dropdown:hover .dropdown-menu,
                        .cart-item {
                            top: 90px;
                        }
                    }
                }
            }

        }
    }  
}



/* =========================================================
        AboutPage-STYLE 
============================================================ */

.aboutPage {
    .finance-service-section {
        .section-title {
            margin-bottom: 13px;
        }

        .finance-carousel .finance-wrapper {
            box-shadow: none;
            border: 1px solid #e7e8e8;
            border-bottom: 0;

            &:hover {
                .wrapper-content {
                    position: relative;
                    z-index: 5;

                    h4 a{
                        color: $white;

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

                    p {color: $white;}
                }

                .hover {
                    .hover-one,
                    .hover-two,
                    .hover-three,
                    .hover-four {
                        opacity: 1;

                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -ms-transform: scale(1);
                        -o-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            .icon {
                background: transparent;
                box-shadow: none;
                transform: translateY(0);
                margin: 30px auto 10px;
            }

            .wrapper-content {
                border-bottom: 4px solid $theme-color;

                h4 {
                    margin: 0 0 15px;
                }

                p {
                    padding: 0 35px 38px;
                }
            }

            .hover {
                .hover-one,
                .hover-two,
                .hover-three,
                .hover-four {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 25%;
                    background: $nav-blue;
                    opacity: 0;
                    z-index: 1;

                    -webkit-transition: all 0.35s ease;
                    -o-transition: all 0.35s ease;
                    -moz-transition: all 0.35s ease;
                    transition: all 0.35s ease;

                    -webkit-transform: scaleY(0);
                    -moz-transform: scaleY(0);
                    -ms-transform: scaleY(0);
                    -o-transform: scaleY(0);
                    transform: scaleY(0);
                }

                .hover-one {
                    top: 0;

                    -webkit-transition-delay: 0.25s;
                    -moz-transition-delay: 0.25s;
                    -o-transition-delay: 0.25s;
                    transition-delay: 0.25s;
                }

                .hover-two {
                    top: 25%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-three {
                    top: 49%;

                    -webkit-transition-delay: 0.105s;
                    -moz-transition-delay: 0.105s;
                    -o-transition-delay: 0.105s;
                    transition-delay: 0.105s;
                }

                .hover-four {
                    top: 74%;

                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                }
            }
        }
    }
}




/* =========================================================
        Team-Page-STYLE 
============================================================ */

.team-page-section {
    .section-wrapper {
        position: relative;

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

            .caption {
                position: relative;

                &:hover {
                    &::before {
                        opacity: 1;
                        -webkit-transform: scale(1, 1);
                        -moz-transform: scale(1, 1);
                        -ms-transform: scale(1, 1);
                        -o-transform: scale(1, 1);
                        transform: scale(1, 1);
                    }

                    .hover-view  {
                        li {
                            opacity: 1;

                            &:nth-child(1) {transform: translateY(0);}

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

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

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(9, 42, 72, 0.75);
                    opacity: 0;
                    z-index: 1;

                    @include transition(.5s);

                    -webkit-transform: scale(1,0.5);
                    -moz-transform: scale(1,0.5);
                    -ms-transform: scale(1,0.5);
                    -o-transform: scale(1,0.5);
                    transform: scale(1,0.5);
                }

                img {width: 100%;}

                .hover-view {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                    width: 100%;
                    text-align: center;
                    margin-top: -8px;

                    li {
                        position: relative;
                        display: inline-block;
                        margin-right: 15px;
                        opacity: 0;
                        z-index: 5;

                        @include transition(.5s);

                        &:nth-child(1) {transform: translateY(10px);}

                        &:nth-child(2) {
                            transform: translateY(20px);
                            transition-delay: .1s;
                        }

                        &:nth-child(3) {
                            transform: translateY(40px);
                            transition-delay: .2s;
                        }

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

                        i {
                            
                            font-size: 24px;
                            color: $white;
                            

                            @include transition(.5s);

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

            .contact-wrapper {
                margin-top: 20px;

                h4 {
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 34px;
                    margin-bottom: -4px;

                    a {
                        color: #222222;

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

                .position {
                    font-size: 14px;
                    font-weight: 500;
                    color: #999999;
                }

                p {
                    color: #6a6a6a;
                    margin: 10px 0 0;
                }
            }
        }
    }

    .link {
        margin-top: 12px;

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

        .btn {
            padding: 8px 34px;

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

    .side-bar {
        .page-list  {
            @media (min-width : 768px) and (max-width : 991px) {
                width: 50%;
                float: left;
            }

            li {
                margin-bottom: 8px;

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

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

                a {
                    font-size: 18px;
                    line-height: 30px;
                    color: #333333;
                    border: 2px solid #f3f3f3;
                    padding: 9px 0;
                    display: block;
                    border-radius: 8px;

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

        .brochure {
            margin-top: 50px;

            @media (min-width : 768px) and (max-width : 991px) {
                width: 50%;
                display: inline-block;
                padding: 0 20px;
            }

            h4 {
                font-size: 22px;
                font-weight: 500;
                line-height: 30px;
                color: #333333;

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

            span {
                font-size: 16px;
                color: $theme-color;
                border: 2px solid $theme-color;
                border-radius: 8px;
                display: block;
                padding: 10px 0;

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

                i {
                    font-size: 22px;
                    color: $theme-color;
                    margin-right: 10px;
                }
            }
        }

        .susbscribe-section {
            border: 2px solid #f3f3f3;
            border-radius: 8px;
            margin-top: 60px;
            padding: 35px 22px;

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

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

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

            h4 {
                font-size: 18px;
                font-weight: 500;
                line-height: 27px;
                color: #0d1d36;
                margin-bottom: 70px;

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

            .form {
                .form-group {
                    margin-bottom: 8px;

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

                    .form-control {
                        font-size: 12px;
                        border: 2px solid $theme-color;
                        color: #bcbaba;
                        border-radius: 8px;
                        padding: 18px;

                        &::placeholder {color: #bcbaba;}
                    }

                    .btn {
                        font-size: 15px;
                        display: block;
                        width: 100%;
                        border-radius: 8px;
                    }
                }
            }
        }
    }
}



/* =========================================================
        Faq-Page-STYLE 
============================================================ */

.faq-page-section {
    .brochure {
        margin-right: 60px;

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

        h4 {
            font-size: 30px;
            font-weight: 500;
            line-height: 30px;
            color: #0d1d36;

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

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

        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 28px;
            color: #666666;
            margin-bottom: 25px;

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

        span {
            font-size: 16px;
            color: $theme-color;
            border: 2px solid $theme-color;
            border-radius: 8px;
            display: block;
            padding: 10px 30px;
            margin-bottom: 18px;

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

            i {
                font-size: 22px;
                color: $theme-color;
                margin-right: 10px;
            }
        }
    }

    .faq-content {
        @media only screen and (max-width: 991px) {margin-top: 50px;}

        h3 {
            font-size: 30px;
            font-weight: 500;
            line-height: 30px;
            color: #222222;
            margin-bottom: 65px;

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

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

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

        .accordion-content {
            .ui-accordion-header {
                position: relative;
                font-size: 18px;
                font-weight: 500;
                color: #031633;
                background-color: $white;
                padding: 13px 33px;
                margin-bottom: 0;
                margin-top: 14px;
                cursor: pointer;
                border: 1px solid #dee0e1;

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

                @media only screen and (max-width: 479px) {
                    font-size: 16px;
                    line-height: 24px;
                    padding: 13px 40px 13px 15px;
                }

                &:focus {outline: none;}

                &::before {
                    content: "\f107";
                    font-family: "FontAwesome";
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                    font-size: 20px;
                    color: #222222;
                    margin-top: -5px;

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

                &.ui-accordion-header-active {
                    border-color: $theme-color;

                    &::before {content: "\f106";}
                }
            }

            .ui-accordion-content {
                padding: 25px 35px 35px;
                border: 1px solid #dee0e1;

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

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

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

                @media only screen and (max-width: 450px){padding: 25px 20px 50px;}

                p {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 26px;
                    color: #828282;
                    word-break: break-all;
                    margin-bottom: 0;
                }
            }
        }
    }
}



/* =========================================================
        partner-Page-STYLE 
============================================================ */

.partner-page-section {
    .partner-wrapper {
        margin-bottom: 15px;

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

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

        .content {
            margin: 30px 30px 0 0;

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

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

            h3 {
                position: relative;
                font-size: 30px;
                font-weight: 500;
                line-height: 27px;
                margin-bottom: 35px;
                padding-bottom: 10px;

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

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

                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -14px;
                    width: 80px;
                    height: 5px;
                    border-radius: 5px;
                    background-color: $theme-color;

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

                a {
                    color: #0d1d36;

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

            p {
                color: #666666;
            }
        }
    }

    .side-bar {
        @media only screen and (max-width: 991px){margin-top: 50px;}

        .page-list  {
            @media (min-width : 768px) and (max-width : 991px) {
                width: 50%;
                float: left;
            }

            li {
                margin-bottom: 8px;

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

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

                a {
                    font-size: 18px;
                    line-height: 30px;
                    color: #333333;
                    border: 2px solid #f3f3f3;
                    padding: 9px 0;
                    display: block;
                    border-radius: 8px;

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

        .brochure {
            margin-top: 50px;

            @media (min-width : 768px) and (max-width : 991px) {
                width: 50%;
                display: inline-block;
                padding: 0 20px;
            }

            h4 {
                font-size: 22px;
                font-weight: 500;
                line-height: 30px;
                color: #333333;

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

            span {
                font-size: 16px;
                color: $theme-color;
                border: 2px solid $theme-color;
                border-radius: 8px;
                display: block;
                @include transition(.5s);

                &:hover {
                    border: 2px solid $nav-blue;
                    background: $nav-blue;
                }

                a {
                    color: $theme-color;
                    display: block;
                    padding: 10px 0;
                }

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

                i {
                    font-size: 22px;
                    color: $theme-color;
                    margin-right: 10px;
                }
            }
        }

        .susbscribe-section {
            border: 2px solid #f3f3f3;
            border-radius: 8px;
            margin-top: 60px;
            padding: 35px 22px;

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

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

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

            h4 {
                font-size: 18px;
                font-weight: 500;
                line-height: 27px;
                color: #0d1d36;
                margin-bottom: 70px;

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

            .form {
                .form-group {
                    margin-bottom: 8px;

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

                    .form-control {
                        font-size: 12px;
                        border: 2px solid $theme-color;
                        color: #bcbaba;
                        border-radius: 8px;
                        padding: 18px;

                        &::placeholder {color: #bcbaba;}
                    }

                    .btn {
                        font-size: 15px;
                        display: block;
                        width: 100%;
                        border-radius: 8px;

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



/* =========================================================
        service-Page-STYLE 
============================================================ */

.service-page-section {
    .side-bar {
        margin-right: 50px;

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

        .page-list  {
            @media (min-width : 768px) and (max-width : 991px) {
                width: 50%;
                float: left;
                margin-right: 50px;
            }

            li {
                margin-bottom: 8px;

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

                &:hover,
                &.active {
                    a {
                        color: $theme-color;
                    }
                }

                a {
                    font-size: 18px;
                    line-height: 30px;
                    color: #333333;
                    border: 2px solid #f3f3f3;
                    padding: 9px 30px;
                    display: block;
                    border-radius: 8px;

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

                    i {
                        font-size: 22px;
                        margin-top: 5px;
                        float: right;
                    }
                }
            }
        }

        .location {
            margin: 65px 0 55px;

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

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

            .heading {
                font-size: 30px;
                font-weight: 500;
                line-height: 30px;
                color: #0d1d36;

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

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

            li {
                margin-bottom: 15px;

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

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

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

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

                .text {
                    font-size: 18px;
                    line-height: 34px;
                    color: #7c828b;
                    margin-left: 45px;

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

        .brochure {

            h4 {
                font-size: 30px;
                font-weight: 500;
                line-height: 30px;
                color: #0d1d36;

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

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

            p {
                font-size: 16px;
                font-weight: 300;
                line-height: 28px;
                color: #666666;
                margin-bottom: 25px;

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

            span {
                font-size: 16px;
                color: $theme-color;
                border: 2px solid $theme-color;
                border-radius: 8px;
                display: block;
                padding: 10px 30px;
                margin-bottom: 18px;
                @include transition(.5s);

                a {color: $theme-color;}

                &:hover {
                    border: 2px solid $nav-blue;
                    background: $nav-blue;
                }

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

                i {
                    font-size: 22px;
                    color: $theme-color;
                    margin-right: 10px;
                }
            }
        }
    }

    .working-section {
        @media only screen and (max-width: 991px){margin-top: 50px;}

        .header {
            margin-bottom: 30px;

            h2 {
                position: relative;
                font-size: 36px;
                font-weight: 600;
                line-height: 40px;
                color: #031633;
                margin-bottom: 53px;

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

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

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

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

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

            p {
                font-size: 15px;
                line-height: 25px;
                color: #6a6a6a;
                margin-left: 30px;

                @media only screen and (max-width: 767px){margin-left: 0;}
            }
        }
        
        .wrapper-content {
            margin-bottom: 52px;

            &.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;}

            img {
                width: 100%;
            }

            h3 {
                position: relative;
                font-size: 22px;
                font-weight: 500;
                line-height: 30px;
                border-bottom: 1px solid #d8d8d8;
                margin: 13px 0 22px;
                padding-bottom: 36px;

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

                    @include transition(.8s);
                }

                @media (min-width : 768px) and (max-width : 991px) {font-size: 20px;line-height: 25px;}

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

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

            &:hover h3::before {width: 100%;}

            .link {
                font-size: 18px;
                font-weight: 500;
                color: #222222;

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

                i {
                    transform: rotate(90deg);
                }

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

        .first-part {margin-bottom: 40px;}
    }

    .single-service-wrapper {
        @media only screen and (max-width: 991px){margin-top: 50px;}

        h3 {
            font-size: 36px;
            font-weight: 500;
            line-height: 30px;
            color: #0d1d36;

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

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

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

        p {
            font-size: 16px;
            line-height: 28px;
            color: #6a6a6a;
            margin-bottom: 30px;

            &:nth-child(3) {margin-bottom: 25px;}
        }

        .service-list {
            margin-bottom: 40px;

            li {
                font-size: 16px;
                line-height: 28px;
                color: #6a6a6a;
                margin-bottom: 2px;

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

        #service-carousel {
            margin-bottom: 100px;

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

            .carousel-indicators {
                width: 200px;
                left: 0;
                right: 0;
                margin: 0 auto;
                bottom: -65px;

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

                li {
                    width: 7px;
                    height: 7px;
                    background-color: #c6c6c6;
                    border: 0;
                    margin: 0 20px;

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

                    &.active {
                        width: 15px;
                        height: 15px;
                        background-color: $theme-color;
                        margin: -3px 20px;

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

            .carousel-inner {
                img {width: 100%;}
            }
        }

        .service-tab {
            padding-top: 17px;

            .nav-tabs {
                border-bottom: 1px solid $theme-color;

                li {
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 30px;
                    margin: 0;

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

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

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

                    a {
                        color: $theme-color;
                        margin: 0;
                        border: 0;
                        border-radius: 5px;
                        padding: 10px 50px;

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

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

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

            .tab-content {
                .tab-pane {
                    margin-top: 22px;

                    p {
                        font-size: 15px;
                        font-weight: 300;
                        line-height: 25px;
                        color: #6a6a6a;

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

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




/* =========================================================
        ContactPage-STYLE 
============================================================ */

.contactPage {
    .contact-section {
        &::before {display: none;}
    }
}




/* =========================================================
        Shop-Page-STYLE 
============================================================ */

.shopPage {
    .banner-section {
        background: url(../images/sub/t-bg.jpg) no-repeat;
        background-position: center;
        background-size: cover;
    }

    .shop-section {
        padding-bottom: 75px;

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

        .left-bar {
            .wrapper-contant {
                margin-bottom: 70px;

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

                h4 {
                    position: relative;
                    font-size: 24px;
                    font-weight: 500;
                    color: #3d424b;
                    margin-bottom: 40px;

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

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

                .layout-slider {
                    margin-top: 60px;

                    span {
                        font-size: 12px;
                        color: #3d424b;
                    }
                }

                ul {
                    li {
                        font-size: 16px;
                        font-weight: 600;
                        border-bottom: 1px solid #f1f1f1;
                        margin-bottom: 10px;
                        padding-bottom: 10px;

                        &:last-child {border: 0;}

                        a {
                            color: #212121;

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

        .right-bar {
            .product-selection {
                .product-wrapper {
                    margin-bottom: 60px;
                    text-align: center;

                    &.last-wrapper {
                        @media only screen and (max-width: 767px){margin-bottom: 0;}
                    }

                    &:hover {
                        .product-detail {
                            background-color: $theme-color;
                            border-radius: 8px;

                            h5 {color: $white;}

                            .cart {color: #3d424b;}

                            .price {
                                background-color: $white;
                                color: $theme-color;
                                box-shadow: 0 0 5px #a5a3a3;
                            }
                        }
                    }

                    img {max-width: 100%;}

                    .product-detail {
                        position: relative;
                        box-shadow: 0 0 20px #dcdada;
                        margin-top: 15px;
                        padding: 15px 20px;

                        @include transition(.8s);

                        h5 {
                            font-size: 20px;
                            font-weight: 500;
                            color: #3d424b;
                            margin-bottom: 5px;

                            @include transition(.5s);
                        }

                        .cart {
                            font-weight: 600;
                            @include transition(.5s);
                        }

                        .price {
                            position: absolute;
                            right: -15px;
                            bottom: -20px;
                            width: 60px;
                            height: 60px;
                            line-height: 60px;
                            font-size: 22px;
                            font-weight: 600;
                            color: $white;
                            background-color: $theme-color;
                            text-align: center;
                            border-radius: 50%;

                            @include transition(.8s);
                        }
                    }
                }
            }
        }
    }

    .pagination-wrapper .pagination {margin: 30px 0 0;}
}




/* =========================================================
        Cart-Page-STYLE 
============================================================ */

.cartpage {
    .banner-section {
        background: url(../images/sub/t-bg.jpg) no-repeat;
        background-position: center;
        background-size: cover;
    }

    .cart-section {
        .table {
            border: 1px solid #dedcdc;
            border-radius: 8px;
            margin: 0;

            thead {
                tr {
                    th {
                        color: #333;
                    }
                }
            }

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

                        img {
                            width: 50px;

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

                    td {
                        color: #333;
                        line-height: 72px;

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

                        i {color: red;}
                    }

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

                        td {
                            text-align: center;
                            padding: 0;
                            line-height: 50px;
                            color: $white;

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

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

                            &:last-child {
                                background-color: $theme-color;
                            }
                        }
                    }
                }
            }
        }

        .cart-amount {
            margin-top: 100px;

            h5 {
                font-size: 30px;
                font-weight: 500;
                color: #3d424b;
            }

            ul {
                border: 1px solid #d8d5d5;

                li {
                    display: flex;
                    border-bottom: 1px solid #d8d5d5;
                    padding: 10px;

                    &:last-child {border: 0;}

                    span {
                        flex: 1;

                        &.text {
                            font-size: 15px;
                            font-weight: 700;
                            color: #3d424b;
                        }

                        &.amount {
                            font-weight: 700;
                            color: #3d424b;
                        }
                    }
                }
            }

            .btn {
                border-radius: 0;
                width: 100%;
                margin-top: 20px;

                &:focus {color: $white;}

                &::before {
                    border-radius: 0;
                }
            }
        }
    }
}





/* =========================================================
        Color-Switcher-STYLE 
============================================================ */

.style-switcher-box {
    background-color: $white;
    width: 252px;
    padding: 50px 25px;
    position: fixed;
    left: -252px;
    top: 15%;
    z-index: 999;
    border: 1px solid lighten($black, 85%);
    
    @include transition(0.3s);

    button {
        background-color: $theme-color;
        width: 45px;
        height: 45px;
        line-height: 40px;
        text-align: center;
        color: $black;
        font-size: 20px;
        border: 0;
        outline: 0;
        box-shadow: none;
        position: absolute;;
        right: -45px;
        top: 50px;

        i {
            color: $white;
            -webkit-animation: rotating 2s linear infinite;
            animation: rotating 2s linear infinite;
        }
    }

    h5 {
        font-size: 18px;
        color: $black;
        text-align: center;
        margin: 0 0 2em;
        text-transform: uppercase;
    }

    .main-list > .list {
        margin-bottom: 30px;

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

    .list-title {
        display: block;
        font-size: 12px;
        border-bottom: 1px solid lighten($black, 80%);
        margin-bottom: 10px;
        padding-bottom: 5px;
        text-transform: uppercase;
    }

    .list > .sublist {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .sublist span {
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .sublist ul {
        overflow: hidden;

        li {
            float: left;
            min-width: 32px;
            min-height: 32px;
            margin: 0 5px 5px 0;
            cursor: pointer;

            &.color-default {background: #3575d3;}
            &.color-style1 {background: #C1AA81;}
            &.color-style2 {background: #FA9928;}
            &.color-style3 {background: #e21f2f;}
            &.color-style4 {background: #09142d;}
            &.color-style5 {background: #3498db;}
            &.color-style6 {background: #a57b4a;}
            &.color-style7 {background: #09a223;}
            &.color-style8 {background: #904eab;}
            &.color-style9 {background: #38cbcb;}
        }
    }

    .pattern-bg {
        .sublist ul {
            overflow: hidden;

            li {
                float: left;
                min-width: 32px;
                min-height: 32px;
                margin: 0 5px 5px 0;
                cursor: pointer;
                background: url(../images/sp.jpg) no-repeat;
            }
        } 
    }

    .layout ul li {
        background-color: $theme-color;
        min-height: 20px;
        color: $white;
        padding: 5px 10px;
        font-size: 12px;
    }

    p {
        font-size: 11px;
        margin: 15px 0 0;

        span {
            color: lighten(red, 20%);
        }
    }
}

.toggle-switcherbox {
    left: 0;
}

/*** rotating ***/
@-webkit-keyframes rotating {
    form {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    form {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}




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

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



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

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

    .preloader {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 50px;
        width: 50px;
        margin: -25px auto 0;
        display: block;

        span {
            position: absolute;
            display: block;
            bottom: 10px;
            width: 9px;
            height: 5px;

            -webkit-animation: animation 3s infinite ease-in-out;
            animation: animation 3s infinite ease-in-out;

            &:nth-child(2) {
                left: 11px;
                -webkit-animation-delay: .2s;
                animation-delay: .2s;
            }

            &:nth-child(3) {
                left: 22px;
                -webkit-animation-delay: .4s;
                animation-delay: .4s;
            }

            &:nth-child(4) {
                left: 33px;
                -webkit-animation-delay: .6s;
                animation-delay: .6s;
            }

            &:nth-child(5) {
                left: 44px;
                -webkit-animation-delay: .8s;
                animation-delay: .8s;
            }

            @keyframes animation {
                0% {
                    height: 5px;
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    background: #092a48;
                }

                25% {
                    height: 30px;
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    background: #48c7ec;
                }

                50% {
                    height: 30px;
                    -webkit-transform: translateX(10px);
                    transform: translateX(10px);
                    background: #092a48;
                }

                100% {
                    height: 5px;
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    background: #48c7ec;
                }
            }
        }
    }
}

