/*

[Main Stylesheet]

Project: HostWHMCS - Responsive Web Hosting and WHMCS Template
Version: 2.9
Author : themelooks.com

[Table of Contents]

1. GENERAL STYLES
    1.1. WRAPPER
    1.2. CUSTOM BUTTONS
    1.3. BACKGROUND IMAGE
    1.4. BACKGROUND COLORS
    1.5. SECTION TITLE
    1.6. SECTION FOOTER
    1.7. PRELOADER

2. HEADER AREA
    2.1. HEADER NAVBAR
    2.2. HEADER LOGO
    2.3. HEADER NAVBAR TOGGLE
    2.4. HEADER NAV
    2.5. HEADER NAVBAR DARK

3. BANNER AREA
    3.1. BANNER BACKGROUND ANIMATION
    3.2. BANNER SLIDER
    3.3. BANNER SLIDER PAGINATION
    3.4. BANNER CONTENT

4. SERVICES AREA
    4.1. SERVICE ITEM
    4.2. SERVICE ICON
    4.3. SERVICE CONTENT

5. ABOUT DESCRIPTION AREA
    5.1. ABOUT DESCRIPTION IMAGE

6. DOMAIN SEARCH AREA
    6.1. SECTION TITLE
    6.2. DOMAIN SEARCH INPUT TEXT
    6.3. DOMAIN SEARCH INPUT RADIO
    6.4. DARK THEME

7. FEATURES AREA
    7.1. FEATURE ITEM
    7.2. FEATURE ICON
    7.3. FEATURE CONTENT

8. PRICING AREA
    8.1. PRICING ITEM
    8.2. PRICING BODY
    8.3. PRICING ICON
    8.4. PRICING TAG
    8.5. PRICING DETAILS
    8.6. PRICING FOOTER

9. PRICING AREA 2
    9.1. PRICING 2 HEADER
    9.2. PRICING 2 TITLE
    9.3. PRICING 2 PRICE

10. PRICE DETAILS AREA
    10.1. PRICE DETAILS HEAD
    10.2. PRICE DETAILS BODY

11. PRICE DETAILS 2 AREA

12. DOMAIN EXTENSION AREA
    12.1. DOMAIN EXTENSION SLIDER
    12.2. DOMAIN EXTENSION CONTENT
    12.3. DOMAIN EXTENSION NAME

13. COUNTER AREA
    13.1. COUNTER ITEM
    13.2. COUNTER ICON
    13.3. COUNTER CONTENT
    13.4. COUNTER DARK

14. COUNTER AREA 2
    14.1. COUNTER 2 ITEM
    14.2. COUNTER 2 CONTENT
    14.3. COUNTER 2 DARK

15. TEAM AREA
    15.1. TEAM ITEM
    15.2. TEAM SOCIAL

16. FEEDBACK AREA
    16.1. FEEDBACK NAV TABS
    16.2. FEEDBACK TRIANGLE
    16.3. FEEDBACK TABS
    16.4. FEEDBACK TABS CONTENT
    16.5. GRAY THEME

17. BLOG AREA
    17.1. BLOG POST
    17.2. BLOG POST IMAGE
    17.3. BLOG POST VIDEO
    17.4. BLOG POST AUDIO
    17.5. BLOG POST TITLE
    17.6. BLOG POST META
    17.7. BLOG POST CONTENT
    17.8. BLOG POST FOOTER
    17.9. BLOG POST COMMENTS
    17.10. BLOG POST COMMENT FORM
    17.11. BLOG POST PAGINATION
    17.11. BLOG WIDGET
    17.12. BLOG WIDGET TITLE
    17.13. BLOG SEARCH WIDGET
    17.14. BLOG RECENT POSTS WIDGET
    17.15. BLOG LINKS WIDGET
    17.16. BLOG TAGS WIDGET
    17.17. BLOG TWITTER WIDGET

18. SUBSCRIBE AREA
    18.1. SUBSCRIBE STICKY
    18.2. SECTION TITLE
    18.3. SUBSCRIBE CONTENT
    18.4. SUBSCRIBE FORM
    18.5. MAP + SUBSCRIBE

19. CLIENTS AREA

20. FAQ AREA
    20.1. FAQ CATEGORIES
    20.2. FAQ CONTENT
    20.3. FAQ PANEL SIMPLE

21. LOGIN AREA

22. CONTACT AREA
    22.1. CONTACT ADDRESS
    22.2. CONTACT SOCIAL
    22.3. CONTACT FORM

23. MAP AREA

24. FOOTER AREA
    24.1. FOOTER BG
    24.2. FOOTER WIDGET
    24.3. FOOTER ABOUT WIDGET
    24.4. FOOTER LINKS WIDGET
    24.5. FOOTER CONTACT WIDGET
    24.6. FOOTER COPYRIGHT

25. 404 AREA
    25.1. 404 TITLE
    25.2. 404 SEARCH BAR

26. PAGE HEADER AREA
    26.1. PAGE TITLE BREADCRUMB
    26.2. PAGE HEADER BREADCRUMB

27. DOMAIN PAGE
    27.1. DOMAIN SEARCH AREA

28. HELPER CLASSES
    28.1. RESET-GUTTER
    28.2. RESET-MARGIN
    28.3. RESET-PADDING
    28.4. VERTICAL-CENTERING

*/


/*------------------------------------*\
    1. GENERAL STYLES
\*------------------------------------*/

@font-face {
    font-family: 'Montserrat-Light';
    src: url(/fonts/Montserrat/Montserrat-Light.ttf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url(/fonts/Montserrat/Montserrat-Regular.ttf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url(/fonts/Montserrat/Montserrat-SemiBold.ttf);
    font-style: normal;
    font-weight: 100;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Montserrat-Regular';
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #737373;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: #fff;
    text-decoration: none;
    outline: 0;
}

p:last-child {
    margin-bottom: 0;
    font-family: 'Montserrat-Light';
}

.fa.fm {
    margin-right: 10px;
}


/* 1.1. WRAPPER */

.wrapper {
    height: 100%;
}


/* 1.2. CUSTOM BUTTONS */

.btn--primary {
    display: inline-block;
    padding: 9px 29px;
    color: #fff;
    background-color: #4fb5de;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 900;
    outline: 0;
}

.btn--ripple {
    position: relative;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    overflow: hidden;
    z-index: 0;
}

.btn--ripple-ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.btn--ripple-animate {
    -webkit-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: scale(2.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
}


/* 1.3. BACKGROUND IMAGE */

.bg--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* 1.4. BACKGROUND COLORS */

.bg--whitesmoke {
    background-color: #f7f7f7;
    border: none;
}

.bg--midnight {
    background-color: #232c3b;
}


/* 1.5. SECTION TITLE */

.section--title {
    margin-top: 0px;
    margin-bottom: 50px;
}

#our-approach .section--title {
    margin-top: 100px;
    margin-bottom: 60px;
}

div#service-title,
.service-title,
.section--title .col-md-12 {
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0;
}

.section--title h1 {
    font-weight: 900;
    font-size: 50px;
    text-align: left;
    color: #021027;
    margin-top: 80px;
}

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

hr {
    width: 25px;
    border: 0;
    height: 2px;
    background: rgb(79 181 222);
    margin: 0 20px 0 0;
}

#service-title h4 {
    color: #4fb5de;
    font-weight: 900;
    font-size: 20px;
}

.section--title .col-md-12 {
    text-align: left;
}

.section--title>.row {
    display: table;
    width: 100%;
    /* padding: 20px 0; */
}

.our-services h3 {
    font-weight: 900;
    color: #021027;
    margin: 20px 0 20px 0;
}

.section--title>.row>.col-md-6 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

#servicesrow2 {
    padding-top: 75px;
}

.section--title h2 {
    margin: 0;
    color: #232c3b;
    font-size: 32px;
    line-height: 40px;
    font-weight: 900;
}

.section--title h2 span {
    color: #4fb5de;
}

.section--title.block h2 span {
    display: block;
}

.section--title p {
    padding: 40px 0 40px 40px;
    border-left: 1px solid #e9e9e9;
}


/* 1.6. SECTION FOOTER */

.section--footer {
    margin-top: 60px;
    text-align: center;
}


/* 1.7. PRELOADER */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #232c3b;
    z-index: 9999999999;
}

.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 3.75em;
    height: 4.25em;
    margin-left: -1.875em;
    margin-top: -2.125em;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotateY(180deg) rotateZ(-60deg);
    transform: rotateY(180deg) rotateZ(-60deg);
    font-size: 20px;
}

.preloader .slice {
    border-top: 1.125em solid transparent;
    border-right: none;
    border-bottom: 1em solid transparent;
    border-left: 1.875em solid #4fb5de;
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    border-radius: 3px 3px 0 0;
}

.preloader.loading {
    -webkit-animation: 2s preload-flip steps(2) infinite both;
    animation: 2s preload-flip steps(2) infinite both;
}

.preloader.loading .slice:nth-child(1) {
    -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-1 linear infinite both;
    animation: 2s preload-cycle-1 linear infinite both;
}

.preloader.loading .slice:nth-child(2) {
    -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-2 linear infinite both;
    animation: 2s preload-cycle-2 linear infinite both;
}

.preloader.loading .slice:nth-child(3) {
    -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-3 linear infinite both;
    animation: 2s preload-cycle-3 linear infinite both;
}

.preloader.loading .slice:nth-child(4) {
    -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-4 linear infinite both;
    animation: 2s preload-cycle-4 linear infinite both;
}

.preloader.loading .slice:nth-child(5) {
    -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-5 linear infinite both;
    animation: 2s preload-cycle-5 linear infinite both;
}

.preloader.loading .slice:nth-child(6) {
    -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
    -webkit-animation: 2s preload-cycle-6 linear infinite both;
    animation: 2s preload-cycle-6 linear infinite both;
}

@-webkit-keyframes preload-cycle-1 {
    5% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    10%,
    75% {
        -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    80%,
    100% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-1 {
    5% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    10%,
    75% {
        -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    80%,
    100% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-cycle-2 {
    10% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    15%,
    70% {
        -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    75%,
    100% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-2 {
    10% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    15%,
    70% {
        -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    75%,
    100% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-cycle-3 {
    15% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    20%,
    65% {
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    70%,
    100% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-3 {
    15% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    20%,
    65% {
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    70%,
    100% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-cycle-4 {
    20% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    25%,
    60% {
        -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    65%,
    100% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-4 {
    20% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    25%,
    60% {
        -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    65%,
    100% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-cycle-5 {
    25% {
        -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    30%,
    55% {
        -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    60%,
    100% {
        -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-5 {
    25% {
        -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    30%,
    55% {
        -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    60%,
    100% {
        -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-cycle-6 {
    30% {
        -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    35%,
    50% {
        -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    55%,
    100% {
        -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@keyframes preload-cycle-6 {
    30% {
        -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
    35%,
    50% {
        -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
        border-left-color: #4fb5de;
    }
    55%,
    100% {
        -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
    }
}

@-webkit-keyframes preload-flip {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(-60deg);
        transform: rotateY(0deg) rotateZ(-60deg);
    }
    100% {
        -webkit-transform: rotateY(360deg) rotateZ(-60deg);
        transform: rotateY(360deg) rotateZ(-60deg);
    }
}

@keyframes preload-flip {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(-60deg);
        transform: rotateY(0deg) rotateZ(-60deg);
    }
    100% {
        -webkit-transform: rotateY(360deg) rotateZ(-60deg);
        transform: rotateY(360deg) rotateZ(-60deg);
    }
}


/*------------------------------------*\
    2. HEADER AREA
\*------------------------------------*/


/* 2.1. HEADER NAVBAR */

.header--navbar {
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
    -webkit-transition: padding 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease;
    transition: padding 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease;
}

#header.sticky .header--navbar {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #021027 !important;
    /* box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28); */
}

#header.sticky .header--navbar a {
    color: #ffffff;
    font-weight: bold;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}


/* 2.2. HEADER LOGO */

.header--logo {
    height: auto;
    font-size: 22px;
    line-height: 30px;
    font-weight: 900;
}

.header--logo span {
    color: #4fb5de;
}


/* 2.3. HEADER NAVBAR TOGGLE */

.header--navbar .navbar-toggle .icon-bar {
    background-color: #4FB5DE;
}


/* 2.4. HEADER NAV */

#headerNav .nav>li>a {
    padding-top: 25px;
    padding-bottom: 20px;
    font-weight: 600;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

#headerNav .nav>li>a:hover,
#headerNav .nav>li>a:focus,
#headerNav .nav>.open>a,
#headerNav .nav>.open>a:hover,
#headerNav .nav>.open>a:focus {
    background-color: transparent;
}

#headerNav .nav>li>a:hover,
#headerNav .nav>li.active>a,
#headerNav .nav>#dropdown.open>a {
    color: #4fb5de;
}

#headerNav .nav>li.active>a {
    font-weight: 900;
}

.navbar-brand {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0px;
}

#headerNav .nav>#dropdown>a>.caret {
    margin-left: 5px;
}

#headerNav .nav>#dropdown>.dropdown-menu>li>a {
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transition: color 0.25s ease, background-color 0.25s ease-in-out;
    transition: color 0.25s ease, background-color 0.25s ease-in-out;
}

#headerNav .nav>#dropdown>.dropdown-menu>li>a:hover,
#headerNav .nav>#dropdown>.dropdown-menu>li>a:focus,
#headerNav .nav>#dropdown>.dropdown-menu>li.active>a {
    color: #fff;
    background-color: #4fb5de;
}

.header--login-btn {
    float: right;
    margin-top: 15px;
    margin-left: 30px;
}

#header.sticky .header--login-btn a.btn--primary {
    color: #fff;
}


/* 2.5. HEADER NAVBAR DARK */

.header--navbar.dark {
    background-color: #232c3b;
}


/*------------------------------------*\
    3. BANNER AREA
\*------------------------------------*/

#banner {
    position: relative;
    height: 100%;
    background-color: #232c3b;
    overflow: hidden;
    z-index: 0;
    background-image: url("/img/banner-slider-img/mountainbg.svg");
    /* background-image: url(/img/background.png); */
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}


/* 3.2. BANNER SLIDER */

#banner .bx-wrapper {
    margin-bottom: 0;
}

#banner .bx-viewport {
    left: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}


/* 3.3. BANNER SLIDER PAGINATION */

#banner .bx-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 1;
}

#banner .bx-pager {
    position: relative;
    bottom: auto;
    float: right;
    width: auto;
    padding-top: 0;
    font-size: 0;
}

#banner .bx-pager-item {
    display: block;
}

#banner .bx-pager-link {
    display: block;
    width: 12px;
    height: 12px;
    margin: 8px 0;
    color: transparent;
    background-color: transparent;
    border: 2px solid #4fb5de;
    border-radius: 50%;
    text-indent: 0;
    -webkit-transition: background-color 1s ease-in-out;
    transition: background-color 1s ease-in-out;
}

#banner .bx-pager-link.active {
    background-color: #4fb5de;
}


/* 3.4. BANNER CONTENT */

.banner--content {
    padding: 60px 0;
    color: #fff;
}

.banner--content h2 {
    margin: 0;
    color: #4fb5de;
    font-size: 38px;
    line-height: 46px;
    font-weight: 900;
}

.banner--content h3 {
    margin: 0;
    font-size: 26px;
    line-height: 34px;
    font-weight: 900;
}

.banner--content p {
    margin: 20px 0;
    max-width: 50vw;
}


/*------------------------------------*\
    4. SERVICES AREA
\*------------------------------------*/

#services {
    padding: 80px 0 77px;
}


/* 4.1. SERVICE ITEM */

.service--item {
    overflow: hidden;
}


/* 4.2. SERVICE ICON */

.service--icon {
    display: table-cell;
    vertical-align: top;
}

.features--icon {
    display: table-cell;
    vertical-align: top;
}


/* 4.3. SERVICE CONTENT */

.service--content {
    padding-left: 30px;
    display: table-cell;
    vertical-align: top;
}

.service--content h3 span {
    color: #4fb5de;
}


/* 4.4. FEATURES CONTENT */

.features--content {
    padding-left: 30px;
    display: table-cell;
    vertical-align: top;
}


/*------------------------------------*\
    5. ABOUT DESCRIPTION AREA
\*------------------------------------*/

#aboutDesc {
    padding: 80px 0;
}

#aboutDesc>.container>.row>div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}


/* 5.1. ABOUT DESCRIPTION IMAGE */

.about-desc--img img {
    width: 100%;
}


/*------------------------------------*\
    6. DOMAIN SEARCH AREA
\*------------------------------------*/

#domainSearch {
    position: relative;
    padding: 80px 0;
}

#domainSearch:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: 0 auto;
    /* background-image: url("img/domain-search-img/01.png"); */
    background-repeat: no-repeat;
    background-position: 100% 100%;
}


/* 6.1. SECTION TITLE */

#domainSearch .section--title {
    margin-top: 0;
    margin-bottom: 30px;
    border: none;
}

#domainSearch .section--title h1 {
    text-align: center;
    font-size: 100px;
    color: white;
}

#domainSearch .section--title h3 {
    text-align: center;
    font-size: 20px;
    color: white;
}


/* 6.2. DOMAIN SEARCH INPUT TEXT */

.domain-search--form .input--text {
    position: relative;
}

.domain-search--form .input--text input {
    padding: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 0 0 1px;
    border-color: #737373;
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    line-height: 26px;
}

.domain-search--form .input--text .highlight {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #4fb5de;
    -webkit-transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
    transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
}

.domain-search--form .input--text input:focus+.highlight,
.domain-search--form .input--text input.error+.highlight {
    width: 100%;
}

.domain-search--form .input--text input.valid+.highlight {
    background-color: #5cb85c;
}


/* 6.3. DOMAIN SEARCH INPUT RADIO */

.domain-search--form .input--radio {
    margin-top: 15px;
    margin-bottom: 25px;
}

.domain-search--form .input--radio .radio-inline {
    display: table-cell;
    width: 1%;
    margin: 0;
}

.domain-search--form .input--radio .radio-inline input {
    margin-top: 8px;
    visibility: hidden;
}

.domain-search--form .input--radio .radio-inline span {
    position: relative;
}

.domain-search--form .input--radio .radio-inline span:before {
    content: " ";
    position: absolute;
    top: 4px;
    left: -20px;
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 2px solid #737373;
    border-radius: 50%;
    -webkit-transition: border-color 0.25s ease, background-color 0.25s ease-in-out;
    transition: border-color 0.25s ease, background-color 0.25s ease-in-out;
}

.domain-search--form .input--radio .radio-inline input:checked+span:before {
    background-color: #4fb5de;
    border-color: #4fb5de;
}


/* 6.4. DARK THEME */

#domainSearch.bg--midnight .section--title h2,
.bg--midnight .domain-search--form,
.bg--midnight .domain-search--form .input--text input {
    color: #fff;
}

.bg--midnight .domain-search--form .input--text input,
.bg--midnight .domain-search--form .input--radio .radio-inline span:before {
    border-color: #fff;
}


/*------------------------------------*\
    7. FEATURES AREA
\*------------------------------------*/

#features {
    padding: 80px 0 0 0;
}


/* 7.1. FEATURE ITEM */

.feature--item {
    text-align: center;
}

#portfolio_row {
    margin-bottom: 30px;
}


/* 7.2. FEATURE ICON */

.feature--icon {
    margin-bottom: 20px;
    position: relative;
    position: relative;
}


/* 7.3. FEATURE CONTENT */

.feature--content h2 {
    color: #021027;
    font-size: 24px;
    font-weight: 900;
}

.feature--content h2 span {
    color: #4fb5de;
}


/*------------------------------------*\
    8. PRICING AREA
\*------------------------------------*/

#pricing {
    padding: 80px 0;
}


/* 8.1. PRICING ITEM */

.pricing--item {
    margin-top: 80px;
    padding-bottom: 47px;
    background-color: #f8f8f8;
    border: 1px solid #f0f0f0;
    text-align: center;
    -webkit-transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
}

.pricing--item:hover {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.pricing--item.raised {
    position: relative;
    margin-top: 50px;
    padding-bottom: 100px;
    color: #fff;
    background-color: #232c3b;
    border: none;
    z-index: 1;
}

.pricing--item.raised:before {
    content: " ";
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: 0;
    background-color: #232c3b;
    z-index: -1;
}


/* 8.2. PRICING BODY */

.pricing--body {
    padding-top: 50px;
}

.pricing--header+.pricing--body {
    padding-top: 0;
}


/* .pricing--item.raised .pricing--body {
    padding-top: 30px;
} */

.pricing--item.raised .pricing--header+.pricing--body {
    padding-top: 15px;
    margin-top: -35px;
    padding-bottom: 15px;
}


/* 8.3. PRICING ICON */

.pricing--icon {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* 8.4. PRICING TAG */

.pricing--tag {
    margin-bottom: 5px;
}

.pricing--tag p strong {
    display: block;
    margin-top: 5px;
    color: #4fb5de;
    font-size: 48px;
    line-height: 56px;
}


/* 8.5. PRICING DETAILS */

.pricing--details {
    padding: 0 35px;
}

.pricing--details h2 {
    margin: 0 0 5px;
    font-size: 30px;
    line-height: 38px;
}

.pricing--details h2 strong {
    color: #4fb5de;
    font-weight: inherit;
}


/* 8.6. PRICING FOOTER */

.pricing--footer {
    margin-top: 45px;
}


/*------------------------------------*\
    13. COUNTER AREA
\*------------------------------------*/

#counter {
    padding: 77px 0 47px;
}


/* 13.1. COUNTER ITEM */

.counter--item-h {
    margin-bottom: 30px;
}

.counter--item {
    overflow: hidden;
}

#counter .col-md-3 {
    padding: 0;
}


/* 13.2. COUNTER ICON */

.counter--icon {
    float: left;
    margin-right: 20px;
}


/* 13.3. COUNTER CONTENT */

.counter--num {
    font-size: 32px;
    line-height: 40px;
    font-weight: 900;
}


/* 13.4. COUNTER DARK */

#counter.bg--midnight {
    color: #fff;
}


/*------------------------------------*\
    15. TEAM AREA
\*------------------------------------*/

#team {
    padding: 80px 0 50px;
}


/* 15.1. TEAM ITEM */

.team--item {
    margin-bottom: 30px;
}

.team--name {
    margin: 0;
    padding: 20px 0 10px;
    font-weight: 900;
    text-align: center;
}

.team--name a {
    color: #737373;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.team--item:hover .team--name a {
    color: #4fb5de;
}

.team--role {
    color: #737373;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}


/* 15.2. TEAM SOCIAL */

.team--social-links {
    margin-top: 10px;
    text-align: center;
}

.team--social-links ul {
    display: inline-block;
    font-size: 0;
    float: none;
}

.team--social-links ul li a {
    font-size: 15px;
    color: #acacac;
    padding: 0px 15px;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.team--social-links ul li a:hover,
.team--social-links ul li a:focus {
    color: #4fb5de;
    background-color: transparent;
}


/*------------------------------------*\
    16. FEEDBACK AREA
\*------------------------------------*/

#feedback {
    padding: 80px 0 80px 0;
}


/* 16.1. FEEDBACK NAV TABS */

.feedback--nav-tabs {
    position: relative;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.feedback--nav-tabs .nav-tabs {
    display: inline-block;
    border: none;
    font-size: 0;
}

.feedback--nav-tabs .nav-tabs li {
    width: 25%;
    margin-bottom: 0;
    padding: 0 10px;
}

.feedback--nav-tabs .nav-tabs li:last-child {
    margin-right: 0;
}

.feedback--nav-tabs .nav-tabs li a {
    margin: 0;
    padding: 0;
    border: none;
}

.feedback--nav-tabs .nav-tabs li a:hover,
.feedback--nav-tabs .nav-tabs li a:focus,
.feedback--nav-tabs .nav-tabs li.active a {
    border: none;
}

.feedback--nav-tabs .nav-tabs>li>a>img {
    max-width: 100%;
}


/* 16.2. FEEDBACK TRIANGLE */

.feedback--triangle {
    position: absolute;
    bottom: -38px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 25px;
    border-color: transparent transparent #f8f8f8 transparent;
    -webkit-transition: left 0.25s ease-in-out;
    transition: left 0.25s ease-in-out;
}


/* 16.3. FEEDBACK TABS */

.feedback--tabs {
    margin-top: 30px;
}


/* 16.4. FEEDBACK TABS CONTENT */

.feedback--tabs .tab-content {
    padding: 30px;
    background-color: #f8f8f8;
    box-shadow: 0px 0 1px 0px #ffffff;
}

.owl-nav {
    display: none;
}

.feedback--tabs .tab-content blockquote {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 16px;
}

#feedback-carousel blockquote {
    font-size: 16px;
    margin: 20px;
    padding: 20px 20px;
    border: none;
    background-color: #ffffff;
}


/* 16.5. GRAY THEME */

.bg--whitesmoke .feedback--tabs .tab-content {
    background-color: #fff;
}

.bg--whitesmoke .feedback--triangle {
    border-bottom-color: #fff;
}


/* 18.5. MAP + SUBSCRIBE */

#map+#subscribe {
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}


/*------------------------------------*\
    19. CLIENTS AREA
\*------------------------------------*/

#clients {
    padding: 80px 0;
}


/*------------------------------------*\
    20. FAQ AREA
\*------------------------------------*/

#faq {
    padding: 80px 0;
}


/* 20.1. FAQ CATEGORIES */

.faq--categories h3 {
    position: relative;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 900;
    padding-bottom: 10px;
}

.faq--categories h3:before {
    content: " ";
    position: absolute;
    bottom: 0px;
    width: 40px;
    height: 2px;
    background-color: #4fb5de;
}

.faq--categories ul {
    margin-top: 25px;
}

.faq--categories ul li a {
    margin-top: 6px;
    color: #737373;
    background-color: #e9e9e9;
    font-size: 16px;
    line-height: 24px;
    font-weight: 900;
    -webkit-transition: color 0.25s ease, background-color 0.25s ease-in-out;
    transition: color 0.25s ease, background-color 0.25s ease-in-out;
}

.faq--categories ul li a:hover,
.faq--categories ul li.active a {
    color: #fff;
    background-color: #4fb5de;
}


/* 20.2. FAQ CONTENT */

.faq--content .panel-group {
    margin-bottom: 0;
}

.faq--content .accordion .panel {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    line-height: 22px;
}

.faq--content .accordion .panel-heading {
    padding: 0;
}

.faq--content .accordion .panel-heading a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    background-color: #4fb5de;
    text-transform: capitalize;
}

.faq--content .accordion .panel-heading a.collapsed {
    background-color: #232c3b;
}

.faq--content .accordion .panel-heading a h4 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 900;
    overflow: hidden;
}

.faq--content .accordion .panel-heading a h4 i.fa-minus {
    float: right;
    color: #fff;
}

.faq--content .accordion .panel-heading a.collapsed i.fa-minus:before {
    content: "\f067";
}


/* 20.3. FAQ PANEL SIMPLE */

.faq--panel-simple {
    padding-bottom: 30px;
    border: none;
}

.faq--panel-simple:last-child {
    padding-bottom: 0;
}

.faq--panel-simple .panel-title {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 900;
    text-transform: capitalize;
}

.faq--panel-simple .panel-body {
    padding: 0;
}


/*------------------------------------*\
    21. LOGIN AREA
\*------------------------------------*/

#login {
    padding: 80px 0;
}

.login--form {
    padding: 30px;
    background-color: #f0f0f0;
    max-width: 380px;
    margin: 0 auto;
}

.login--form p.help-block {
    font-weight: 400;
    font-size: 14px;
    margin: 25px 0 5px;
}

.login--form p.help-block {
    margin-top: 20px;
}

.login--form p.help-block label {
    margin-bottom: 0;
}

.login--form p.help-block input[type="checkbox"] {
    margin-top: 0;
    margin-right: 8px;
}

.login--form .form-group {
    position: relative;
}

.login--form input.form-control {
    box-shadow: none;
    border-radius: 0;
    height: auto;
    min-height: 38px;
    background-color: transparent;
    border-width: 0 0 1px;
    padding-left: 0;
}

.login--form input.form-control:focus {
    border-color: #ccc;
}

.login--form .form-group .highlight {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #4fb5de;
    -webkit-transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out;
    transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

.login--form .form-group input:focus+.highlight,
.login--form .form-group input.error+.highlight {
    width: 100%;
}

.login--form .form-group input.valid+.highlight {
    background-color: #5cb85c;
}

.login--form .btn--primary {
    margin-top: 15px;
}

.login--form .btn--ripple {
    vertical-align: middle;
}


/*------------------------------------*\
    22. CONTACT AREA
\*------------------------------------*/

#contact {
    padding: 80px 0;
}


/* 22.1. CONTACT ADDRESS */

.contact--address h2 {
    position: relative;
    margin: 0 0 25px;
    padding-bottom: 15px;
    color: #737373;
    font-size: 26px;
    line-height: 34px;
    font-weight: 900;
    text-transform: uppercase;
}

.contact--address h2:before {
    position: absolute;
    content: " ";
    width: 40px;
    height: 2px;
    background-color: #4fb5de;
    bottom: 0px;
}

.contact--address h2 span {
    color: #4fb5de;
}

.contact--address address {
    margin-top: 30px;
}

.contact--address address p {
    margin-bottom: 20px;
    color: #737373;
    font-weight: 400;
    font-size: 16px;
    overflow: hidden;
}

.contact--address address p:last-child {
    margin-bottom: 0;
}

.contact--address address p img {
    float: left;
    display: block;
    max-width: 60px;
    margin-right: 15px;
}

.contact--address address p span {
    display: block;
    margin-top: -2px;
}


/* 22.2. CONTACT SOCIAL */

.contact--social-links {
    margin-top: 26px;
}

.contact--social-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.contact--social-links li {
    display: inline-block;
    margin-right: 4px;
}

.contact--social-links li a {
    width: 40px;
    padding: 9px 0;
    text-align: center;
}


/* 22.3. CONTACT FORM */

.contact--form {
    padding-left: 0px;
    font-weight: 400;
}

.contact--form label {
    font-weight: 400;
}

.contact--form .form-group {
    position: relative;
}

.contact--form .form-control {
    margin-bottom: 30px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    border-bottom: 1px solid #e9e9e9;
    height: auto;
    padding: 8px 0;
}

.contact--form textarea.form-control {
    min-height: 172px;
    resize: none;
}

.contact--form .highlight {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #4fb5de;
    -webkit-transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
    transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
}

.contact--form input:focus+.highlight,
.contact--form textarea:focus+.highlight,
.contact--form input.error+.highlight,
.contact--form textarea.error+.highlight {
    width: 100%;
}

.contact--form input.valid+.highlight,
.contact--form textarea.valid+.highlight {
    background-color: #5cb85c;
}


/*------------------------------------*\
    23. MAP AREA
\*------------------------------------*/

#map {
    min-height: 400px;
}


/*------------------------------------*\
    24. FOOTER AREA
\*------------------------------------*/

#footer {
    position: relative;
    margin-top: -10px;
    background-color: #232c3b;
    border-bottom: 64px solid #151a23;
    z-index: 1;
}

#footer .container {
    position: relative;
}


/* 24.1. FOOTER BG */

.footer--bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -64px;
    height: 100%;
    background-size: auto;
    background-position: -200px 100%;
    z-index: -2;
}


/* 24.2. FOOTER WIDGET */

.footer--widget {
    margin-top: 80px;
    margin-bottom: 45px;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
}

.footer--widget:last-child {
    margin-bottom: 0;
}

.footer--widget h2 {
    position: relative;
    margin: 0 0 25px;
    padding-bottom: 5px;
    font-weight: 900;
    font-size: 24px;
    line-height: 28px;
}

.footer--widget h2:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 1px;
    background-color: #4fb5de;
}


/* 24.3. FOOTER ABOUT WIDGET */

.footer--about a {
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.footer--about a:hover,
.footer--about a:focus {
    color: #4fb5de;
}


/* 24.4. FOOTER LINKS WIDGET */

.footer--links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer--links ul li {
    margin-bottom: 8px;
}

.footer--links ul li:last-child {
    margin-bottom: 0;
}

.footer--links ul li a {
    display: block;
    padding-bottom: 5px;
    border-bottom: 1px dotted #fff;
    -webkit-transition: color 0.25s ease, border-color 0.25s ease;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.footer--links ul li a:hover,
.footer--links ul li a:focus {
    color: #4fb5de;
    border-color: #4fb5de;
}


/* 24.5. FOOTER CONTACT WIDGET */

.footer--contact .btn--primary {
    margin-top: 0;
    font-weight: normal;
    text-transform: none;
}

.footer--contact .btn-block {
    display: block;
}

.footer--contact .btn-block+.btn-block {
    margin-top: 8px;
}

.footer--contact-social .nav>li>a {
    padding: 10px;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.footer--contact-social .nav>li>a:hover,
.footer--contact-social .nav>li>a:focus {
    color: #4fb5de;
    background-color: transparent;
}


/* 24.6. FOOTER COPYRIGHT */

.footer--copyright {
    position: absolute;
    left: 0;
    bottom: -64px;
    width: 100%;
    padding: 20px 0;
    color: #fff;
}

.footer--copyright a {
    color: #4fb5de;
    font-weight: 900;
}


/*------------------------------------*\
    25. 404 AREA
\*------------------------------------*/

#f0f {
    height: 100%;
    color: #fff;
    background-color: #232c3b;
    text-align: center;
}

#f0f>.container,
#f0f>.container>.row,
#f0f>.container>.row>div {
    height: 100%;
}


/* 25.1. 404 TITLE */

#f0f .title {
    margin: 0;
}

#f0f .title h2 {
    margin: 0;
    padding: 0;
    font-size: 120px;
    line-height: 128px;
    font-weight: 900;
}

#f0f .title h2:before {
    display: none;
}

#f0f .description p {
    margin: 20px 0 30px;
    font-size: 20px;
    font-weight: 500;
}


/* 25.2. 404 SEARCH BAR */

.f0f--search-bar .input--text {
    position: relative;
}

.f0f--search-bar .form-control {
    margin-bottom: 40px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: #fff;
    background-color: transparent;
    border-bottom: 1px solid #fff;
    height: auto;
    padding: 8px 0;
}

.f0f--search-bar .highlight {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #4fb5de;
    -webkit-transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
    transition: width 0.55s ease-in-out, background-color 0.25s ease-in-out;
}

.f0f--search-bar input:focus+.highlight,
.f0f--search-bar input.error+.highlight {
    width: 100%;
}

.f0f--search-bar input.valid+.highlight {
    background-color: #5cb85c;
}

.f0f--search-bar .btn--primary {
    min-width: 120px;
    margin: 10px 5px 0;
    vertical-align: middle;
}


/*------------------------------------*\
    26. PAGE HEADER AREA
\*------------------------------------*/

#pageHeader {
    margin-top: 120px;
}


/* 26.1. PAGE TITLE BREADCRUMB */

#pageHeader .section--title {
    margin-top: 0;
    margin-bottom: 0;
}


/* 26.2. PAGE HEADER BREADCRUMB */

.page-header--breadcrumb {
    padding: 50px 0 50px 40px;
    border-left: 1px solid #e9e9e9;
}

.page-header--breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background-color: transparent;
    text-transform: uppercase;
    font-weight: 400;
}

.page-header--breadcrumb .breadcrumb li a {
    color: #232c3b;
    -webkit-transition: color 0.25s ease-in;
    transition: color 0.25s ease-in;
}

.page-header--breadcrumb .breadcrumb li a:hover,
.page-header--breadcrumb .breadcrumb>.active {
    color: #4fb5de;
}


/*------------------------------------*\
    27. DOMAIN PAGE
\*------------------------------------*/


/* 27.1. DOMAIN SEARCH AREA */


/*------------------------------------*\
    28. HELPER CLASSES
\*------------------------------------*/


/* 28.1. RESET-GUTTER */

.reset-gutter {
    margin-left: 0;
    margin-right: 0;
}

.reset-gutter>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}


/* 28.2. RESET-MARGIN */

.reset-margin {
    margin-right: 0;
    margin-left: 0;
}


/* 28.3. RESET-PADDING */

.reset-padding {
    padding-right: 0;
    padding-left: 0;
}


/* 28.4. VERTICAL-CENTERING */

.vc-parent {
    width: 100%;
    height: 100%;
    display: table;
}

.vc-child {
    display: table-cell;
    vertical-align: middle;
}

.vc-child-bottom {
    display: table-cell;
    vertical-align: bottom;
}

.img-responsive-por {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: 0.5s ease;
    backface-visibility: hidden;
}

.button_web {
    transition: 0.5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.feature--icon:hover .img-responsive-por {
    opacity: 0.3;
}

.feature--icon:hover .button_web {
    opacity: 1;
}

.button_text {
    display: inline-block;
    padding: 9px 29px;
    color: #fff;
    border: none;
    background-color: #4fb5de;
    border-radius: 30px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    outline: 0;
}

nav.header--navbar.navbar.navbar-fixed-top {
    background-color: rgb(35, 44, 59);
}

#index nav.header--navbar.navbar.navbar-fixed-top {
    background-color: transparent;
}


/*logo img style*/

.logo_img {
    height: 50px;
}

#header.sticky .header--navbar .dropdown-menu a {
    color: #333;
}

i.fa.fa-github {
    display: none;
}

svg#chat-icon-svg {
    display: none;
}

a#contact_info {
    color: #737373;
}


/* services icons */

.service--icon {
    width: 122px;
    height: 122px;
}


/* #color-1 {
    background-color: #ffdc67;
} */


/* #color-6 img,
#color-4 img,
#color-2 img{
    border-radius: 3000px;
    background-color: #bbdfff;
    padding: 10px;
    width: 80px;
    height: 80px;
} */


/* #color-3 {
    background-color: #90c3ef;
} */


/* #color-4 {
    background-color: #ffdc67;
} */


/* #color-5 {
    background-color: #6066b8;
} */


/* #color-6 {
    background-color: #90c3ef;
} */

.service--icon img {
    margin: 0px;
    width: 60px;
    height: 60px;
    text-align: center;
    /* background-color: #d0e9ff;
    border-radius: 3000px;
    padding: 10px; */
}

.features--icon img {
    margin: 11px;
    width: 100px;
    height: 100px;
    text-align: center;
}

.pricing--icon img {
    width: 125px;
    height: 125px;
    padding: 10px;
}

#first {
    width: 165px;
    height: 165px;
}

h3.software_heading {
    font-size: 27px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 25px;
}

p.software_paragraph {
    line-height: 1.7;
}

div#owl-software {
    padding-right: 50px;
}

#language {
    margin: 70px 0 20px 0;
}

#language h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #232c3b;
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
}

#language p {
    text-align: center;
    margin-bottom: 35px;
    padding: 0 100px;
    line-height: 1.7;
}

#overlay.shown {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.col-md-6.col-lg-4.service--item-h {
    margin-bottom: 50px;
}

#owl-feedback .col-md-8 {
    padding-left: 50px;
}

#owl-feedback .col-md-4 {
    width: 33.33333333%;
    background-color: #ffffff;
    height: 280px;
    border-radius: 10px;
    box-shadow: 3px 3px 10px 5px #4fb5de;
}

#owl-feedback .item {
    height: 300px;
}

#owl-feedback .row {
    margin: 5px;
}

#owl-feedback .owl-item img {
    display: block;
    width: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div#feedback {
    background-color: #eef8fc;
}

#owl-feedback p {
    line-height: 1.5;
}

#owl-feedback h4 {
    color: #4FB5DE;
}

#feedback-desktop .container {
    width: 60vw;
    margin: 0 auto;
}

#owl-feedback-mobile img {
    background-color: #ffffff;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0px 5px 5px #4fb5de;
    width: 60vw;
    padding: 10px 50px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.feedback-content {
    width: 80vw;
    margin: 0 auto;
}

#owl-feedback .owl-nav {
    display: block;
    font-size: 70px;
}

#feedback-desktop .owl-prev span {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 130px;
    margin-left: -100px;
    color: #4fb5de;
    background-color: #fff;
    padding: 10px 20px 25px 20px;
    border-radius: 100px;
}

#feedback-desktop .owl-next span {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 130px;
    margin-right: -80px;
    color: #4fb5de;
    background-color: #fff;
    padding: 10px 20px 25px 20px;
    border-radius: 100px;
}

h3 {
    margin-top: 0;
}


/* website page */

.about-desc--content {
    color: #000;
    text-align: center;
}

#bold span {
    font-weight: bolder;
}

.about-desc--content h3 {
    line-height: 1.5;
    font-size: 30px;
}

.about-desc--content button#token {
    margin-top: 20px;
}


/* web-process area */

#web-process h1 {
    font-weight: 900;
    font-size: 50px;
    border: 5px solid;
    border-radius: 50px;
    width: 80px;
    height: 80px;
    padding: 5px 18px;
    font-family: sans-serif;
    margin: 60px 0;
}

#web-process .container {
    width: 80vw;
}

div#web-process {
    color: #fff;
    background-color: #232C3B;
    padding: 100px 0;
    margin-bottom: 80px;
    position: absolute;
    top: 1000px;
    width: 100%;
}

#web-process h3 {
    font-weight: bold;
    font-size: 30px;
}

#web-process h4 {
    font-weight: 700;
    margin-bottom: 20px;
}

#web-process h4::before {
    content: " ";
    position: absolute;
    width: 100px;
    height: 1px;
    margin-top: 30px;
    background-color: #fff;
}


/* better feature section */

#better-features {
    margin-top: 350px;
    color: #000;
}

.features--content h3 span {
    color: #4FB5DE;
    font-weight: 900;
    font-size: 24px;
    line-height: 32px;
}

.features--content h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 32px;
    font-weight: 900;
    color: #737373;
}

.col-md-6.col-lg-4 .features--item {
    margin-bottom: 50px;
}

#better-features h2 {
    font-weight: bold;
    margin-bottom: 100px;
}


/* Responsive section */

div#responsive-content {
    background-color: #232C3B;
    padding: 100px 0;
    color: #fff;
}

#responsive-content h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

#responsive-content button#token {
    margin-top: 20px;
}

#responsive-content img {
    max-width: 30vw;
}

#responsive-content .col-md-7 {
    padding-right: 50px;
}


/* contact form section */

div#contact-form {
    color: #000;
    padding: 100px 0;
    background: #f8f8f8;
}

#contact-info {
    padding-right: 50px;
}

#contact-info h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

#contact-info p {
    margin-bottom: 20px;
    line-height: 1.7;
}

#contact-form button#token {
    height: 40px;
    width: 40px;
    padding: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 50px;
    margin-right: 50px;
}

#contact-form .contact--form .form-control {
    margin-bottom: 30px;
    border: none;
    box-shadow: none;
    border-radius: 30px;
    background-color: #fff;
    height: auto;
    padding: 8px 15px;
}

ul.sun {
    list-style-type: none;
}

.php {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    top: 440px;
    left: 140px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-php-css-js;
    -webkit-animation-duration: 25s;
}

.blazor {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    top: 35px;
    left: 20px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-blazor;
    -webkit-animation-duration: 25s;
}

.css {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    top: 270px;
    left: -30px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-php-css-js;
    -webkit-animation-duration: 25s;
}

.react {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    top: -35px;
    left: 270px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-react;
    -webkit-animation-duration: 25s;
}

.html {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    bottom: 50px;
    left: 390px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-html;
    -webkit-animation-duration: 25s;
}

.js {
    background-color: #ffffff;
    padding: 10px;
    position: absolute;
    bottom: 280px;
    left: 440px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: rotate-php-css-js;
    -webkit-animation-duration: 25s;
}

.php img,
.blazor img,
.react img,
.html img,
.css img,
.js img {
    width: 65px;
    height: 65px;
}

.sun {
    border: 1px dashed #a7a7a7;
    width: 500px;
    height: 500px;
    border-width: 3px;
    border-radius: 300000px;
    position: relative;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: orbit;
    -webkit-animation-duration: 25s;
    margin: 80px auto 0 auto;
}

#gear {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 440px;
    top: 0%;
    margin-top: 200px;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: orbit;
    -webkit-animation-duration: 25s;
}

@-webkit-keyframes orbit {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate-php-css-js {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-360deg)
    }
}

@-webkit-keyframes rotate-blazor {
    from {
        -webkit-transform: rotate(20deg)
    }
    to {
        -webkit-transform: rotate(-340deg)
    }
}

@-webkit-keyframes rotate-react {
    from {
        -webkit-transform: rotate(10deg)
    }
    to {
        -webkit-transform: rotate(-350deg)
    }
}

@-webkit-keyframes rotate-html {
    from {
        -webkit-transform: rotate(5deg)
    }
    to {
        -webkit-transform: rotate(-355deg)
    }
}

#owl-feedback .owl-dots {
    display: none;
}


/* software page */

#our-software-features .feature--icon img {
    width: 50px;
    height: 50px;
}

#our-software-features .col-md-4.feature--item-h {
    padding: 20px 10px;
    border: 1px solid #E1E1E1;
    margin: 25px 20px;
    max-width: calc(33.33333% - 60px);
    border-radius: 5px;
    background-color: white;
    box-shadow: 3px 3px 10px 5px #e1e1e1;
}

div#our-software-features {
    background-color: #f7f7f7;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f7f7f7 50%, #f7f7f7 100%);
}

a#learn_more {
    color: #4fb5de;
    font-weight: 900;
}

div#features-services {
    color: white;
    margin-bottom: 50px;
}

.feature--content p {
    color: #232C3B;
    font-size: 14px;
    font-weight: 600;
}

#features-services .col-md-12 {
    margin-bottom: 80px;
    color: #232C3B;
}

#features-services h2 {
    font-weight: bold;
}

#software-features .container {
    padding-bottom: 30px;
}

#client-feature h2 {
    font-weight: bold;
    margin-bottom: 20px;
}

#client-feature button#token {
    margin-top: 20px;
}

#client-feature {
    background-image: url("/img/client-background.svg");
    position: relative;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#client-content {
    color: white;
    margin: auto;
    padding: 161px 0;
    width: 40%;
}

#client-feature img.img-responsive.center-block {
    position: relative;
    z-index: 9;
    padding: 85px 70px 85px 0;
}

.team--name a {
    font-size: 23px;
}

#owl-portfolio {
    display: none;
}

#owl-big-portfolio {
    display: none;
}

#domainSearch.page {
    padding: 150px 0 70px;
}

#domainSearch .section--title h1 {
    font-size: 80px;
}

#portfolio-features .container {
    width: 100%;
}

#owl-pricing {
    display: none;
}

div#first_price {
    margin-left: 0px;
}

div#second_price {
    margin-left: 0px;
    margin-bottom: 0px;
}

div#third_price {
    margin-left: 0px;
    position: static;
    margin-top: 0px;
    width: 33.3%;
}

div#services-features {
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
}

.service--content h3 {
    font-size: 20px;
}

#our-approach .container,
.our-services .container,
.pricing .container,
#language .container,
#services-features .container,
#pricing .container,
#features .container,
#feedback .container,
#footer .container,
#faq .container,
#pageHeader .container,
#aboutDesc .container,
#team .container,
#clients .container,
#aboutDesc .container,
#features-services .container {
    width: 80vw;
    padding: 0;
}

#our-features .section--title .row,
#our-approach .section--title .row,
#services .section--title .row,
#pricing .section--title .row,
#feedback .section--title .row,
#features .section--title .row,
#faq .section--title .row,
#pageHeader .section--title .row,
#aboutDesc .section--title .row,
#team .section--title .row,
#clients .section--title .row,
#aboutDesc .section--title .row,
#contact .section--title .row {
    text-align: center;
}

#our-approach .container {
    margin-top: 100px;
}

#pricing .container {
    margin-top: 100px;
}

#software-features .col-md-8 {
    max-width: 55vw;
    margin-left: 100px;
}

#software-features .col-md-4 {
    margin-top: 50px;
}

svg#Layer_1 {
    max-width: 50vw;
}

#aboutDesc-about .col-md-4 {
    margin: 80px 0;
}

#aboutDesc-about .col-md-8 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.about-desc--img {
    width: 100%;
}

#counter .col-md-3 {
    width: 40%;
    margin-left: 100px;
}

#portfolio-features {
    margin-top: 100px;
    display: block;
}

#footer {
    margin-top: 0;
}

#banner .bx-controls {
    width: 600px;
}

.team--name a {
    font-size: 23px;
}

#owl-portfolio {
    display: none;
}

#owl-big-portfolio {
    display: none;
}

#domainSearch.page {
    padding: 150px 0 70px;
}

#domainSearch .section--title h1 {
    font-size: 80px;
}

#portfolio-features .container {
    width: 100%;
}

#owl-pricing {
    display: none;
}

div#first_price {
    margin-left: 0px;
}

div#second_price {
    margin-left: 0px;
    margin-bottom: 0px;
}

div#third_price {
    margin-left: 0px;
    position: static;
    margin-top: 0px;
    width: 33.3%;
}

div#services-features {
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
}

#pricing .container {
    margin-top: 100px;
}

#software-features .col-md-8 {
    max-width: 55vw;
    margin-left: 100px;
}

#software-features .col-md-4 {
    margin-top: 50px;
}

#features-services .container {
    margin-top: 100px;
    margin-bottom: 100px;
}

svg#Layer_1 {
    max-width: 50vw;
}

#aboutDesc-about .col-md-4 {
    margin: 80px 0;
}

#aboutDesc-about .col-md-8 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.about-desc--img {
    width: 100%;
}

#counter .col-md-3 {
    width: 40%;
    margin-left: 100px;
}

#portfolio-features {
    margin-top: 100px;
    display: block;
}

#footer {
    margin-top: 0;
}

#banner .bx-controls {
    width: 600px;
}


/* HOMEPAGE DESIGN  */

div#our-approach {
    background-color: #eef8fc;
    padding-bottom: 50px;
}

div#our-approach .service-content h3 {
    font-family: Montserrat-SemiBold;
    font-size: 24px;
    color: #021027;
    font-weight: 900;
}

div#our-approach .service-content p:last-child {
    margin-bottom: 0;
    color: #021027;
    font-weight: 600;
}


/* pricing section  */

.pricing {
    margin-top: 100px;
}

.pricing-section .container .h1,
h1 {
    font-size: 55px;
    font-weight: bold;
}

.pricing-section .container p {
    margin: 0;
}

div#main-plan .order-now {
    border: 2px solid #021027;
    background-color: #fff;
    color: #021027;
}

.pricing-section .order-now {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    width: 100%;
    border: 2px solid #021027;
    background-color: #021027;
    text-decoration: none !important;
    color: #ffffff;
    border-radius: 30000px;
    transition: all .3s;
    text-align: center;
    font-weight: 900;
}

#main-plan .order-now:hover {
    border-color: rgb(54, 140, 231);
    background-color: rgb(54, 140, 231);
    color: rgb(255, 255, 255);
    box-shadow: 0 5px 10px 3px rgb(1 11 27 / 12%);
}

.pricing-section .order-now:hover {
    border-color: rgb(54, 140, 231);
    background-color: rgb(54, 140, 231);
    color: #fff;
    box-shadow: 0 5px 10px 3px rgb(1 11 27 / 12%);
}

.pricing-section .col-md-4 {
    color: #021027;
    width: 80%;
    box-shadow: 0 5px 10px 3px rgb(79 181 222 / 33%);
    margin: 0px 30px 70px 30px;
    padding: 30px 60px;
    border-radius: 25px;
}

div#main-plan {
    color: #fff;
    background-color: #021027;
}

.our-services {
    background-color: #eef8fc;
    padding: 0px 0;
}

.our-services .container {
    margin: 0px auto 100px auto;
    padding: 50px 0;
    display: flex;
}

.row.services-feature-row {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.row.services-feature-row .col-md-4.feature--item-h {
    max-width: calc(33.33333% - 60px);
    margin: 0px 30px 70px 30px;
    border: solid 1px #ebeef2;
    box-shadow: 0 5px 10px 3px rgb(79 181 222 / 24%);
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;
}

.feature--item-services {
    text-align: center;
}

.our-clients #owl-client img {
    height: 50px;
    filter: brightness(0) invert(1);
    text-align: center;
    padding: 0px 20px;
    margin: 20px auto 40px auto;
}

.our-clients {
    background-color: #7797f1;
}

.our-clients .section--title {
    margin-top: 50px;
    margin-bottom: 30px;
}

.our-services h4 {
    font-weight: 900;
    color: #021027;
}

.our-services .feature--content h2 {
    color: #021027;
    font-weight: 900;
    margin-top: -20px;
}

.pricing-section .owl-nav.disabled {
    display: block;
    font-size: 70px;
}

.pricing-section button.owl-prev span {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 250px;
    margin-left: -100px;
    color: #ffffff;
    background-color: #4fb5de;
    padding: 10px 20px 25px 20px;
    border-radius: 20px;
}

.pricing-section button.owl-next span {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 250px;
    margin-right: -80px;
    color: #ffffff;
    background-color: #4fb5de;
    padding: 10px 20px 25px 20px;
    border-radius: 20px;
}

#first {
    height: 100px;
}

#second {
    height: 100px;
}

#third {
    height: 100px;
}

#owl-pricing .owl-stage-outer {
    max-height: 800px;
}

#owl-pricing {
    margin-bottom: 40px;
    margin-top: -40px;
}

#owl-pricing .pricing--footer {
    margin-top: 25px;
}

#owl-pricing .item {
    min-width: 50vw;
    margin: 0 -15px;
}

.pricing--item {
    top: 0;
}

#feedback .owl-nav,
.our-clients .owl-nav {
    display: none !important;
}

.our-clients h3 {
    margin-top: 20px;
    margin-bottom: 30px;
}


/* our work section  */

.work-image {
    border-top-left-radius: 100px;
    width: 90%;
    border-bottom-right-radius: 100px;
}

.our-work .container {
    width: 80vw;
    margin: 0 auto 100px auto;
}

.our-work h3 {
    color: #021027;
    margin-top: 50px;
    font-size: 50px;
    font-weight: 900;
}

.our-work p {
    margin: 20px 0 30px 0;
}

.languages {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.our-work .row {
    display: flex;
    align-items: center;
}


/* our blog  */

.our-blog {
    background-color: #021027;
}

.our-blog h3 {
    color: #ffffff;
    margin-top: 50px;
    font-size: 50px;
    font-weight: 900;
}

.our-blog p {
    margin: 20px 0 30px 0;
    color: #ffffff;
}

.our-blog .work-image {
    background-color: #fff;
    height: 400px;
}

.our-blog .row {
    display: flex;
    align-items: center;
    padding: 100px 0;
    padding: 50px 0;
}

.our-blog .container {
    width: 80vw;
    padding: 0;
}

.our-blog .col-md-6 {
    padding: 0 15px 0 0;
}

.card .feature--item-services {
    position: relative;
    width: 250px;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
}

.card .feature--item-services .feature--icon {
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    z-index: 10000;
    width: 100%;
    height: 150px;
    transition: 0.6s ease-in-out;
}

.card .feature--item-services:hover .feature--icon {
    top: 10%;
    transform: translateY(0%);
}

.card .feature--item-services:hover {
    background: #fff;
    transition: 0.6s ease-in-out;
    background-image: url(/img/snowflake.svg);
    background-repeat: no-repeat;
    background-size: 250px 200px;
}

.card .feature--item-services .feature--icon img {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
}

.card .feature--item-services .feature--content {
    position: absolute;
    bottom: -40px;
    width: 100%;
    height: 100px;
    text-align: center;
    transition: 0.6s ease-in-out;
    z-index: 10;
}

.card .feature--item-services:hover .feature--content {
    height: 180px;
}

#services-img {
    width: 65px;
    height: 65px;
}

.our-clients .owl-dots {
    display: none;
}

.row.services-feature-list {
    display: flex;
}

/* dropdown menu  */
.dropdown > a{
    cursor: pointer;
}
li.dropdown:hover .dropdown-menu {
    display: block;
}
.navbar-nav li .dropdown-menu{
    border-radius: 10px;
    left: 0% !important;
    min-width: 200px;
}
.dropdown-menu > li > a {
    display: block;
    padding: 0;
    clear: both;
    font-weight: 800;
    line-height: 1.42857;
    font-size: 16px;
    color: rgb(2 16 39);
    white-space: nowrap;
    margin: 5px;
}
.dropdown-menu > li > a:hover{
    background: none !important;
}
.dropdown-menu > li{
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: inherit;
    margin: 5px;
}
.dropdown-menu > li:hover{
    background-color: #4fb5de30 !important;
    border-radius: 10px;
}
img#services-icon {
    width: 30px;
    height: 30px;
    margin: 0 10px 0 5px;
}
.nav > li > a {
    padding: 10px 20px;
}
.nav-arrow{
    width: 10px;
    height: 10px;
    position: absolute;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffffff;
    top: 0;
    left: 35px;
    margin-top: -0.70em;
}