/*---------------------------------------------
Template name:  BNSCloud
Version:        1.2
Author:         ThemeLooks
Author url:     http://themelooks.com

NOTE:
-----
Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

[Table of Content]

01: General CSS 
    1.1: Default CSS
    1.2: Buttons
    1.3: Default classes
    1.4: Padding
    1.5: Animations
02: Page title
03: Section/Widget title
04: Header
    4.1: Logo
    4.2: Header menu
    4.3: Sticky header
05: Banner
06: Features
07: Home features
    7.1: Single home feature
08: Pricing plans
09: Why us
10: Review slider
11: Subscribe
12: News/Blog
    12.1: Single post
    12.2: Sidebar search form
    12.3: Sidebar widgets
    12.4: Blog details
    12.5: Post author
    12.6: Post comments
    12.7: Comment form
13: Footer
    13.1: Footer posts
    13.2: Footer contacts
    13.3: Footer form
    13.4: Bottom footer
14: About us
    14.1: Members
15: Counter
16: Domain
    16.1: Domain checker
    16.2: Domain price
    16.3: Domain table
17: Contact
18: Others

----------------------------------------------*/

/*=============================================
    01: General CSS
==============================================*/

/* 1.1: Default CSS */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
::-moz-selection {
    background: #031b4e;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #031b4e;
    color: #fff;
    text-shadow: none;
}
::-webkit-input-placeholder {
    color: #7884ac !important;
    opacity: 1 !important;
}
::-moz-placeholder {
    color: #7884ac !important;
    opacity: 1 !important;
}

textarea {
    resize: none; 
}
img {
    max-width: 100%;
    height: auto; 
}
p:last-child{ 
    margin-bottom: 0; 
}
a {
    color: #0063f8;
}
a:hover {
    color: #031b4e;
}
a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 { 
    color: #031b4e; 
}
h1 { 
    font-size: 36px; 
}
h2 {
    font-size: 30px;
    font-weight: bold;
}
h3 { 
    font-size: 18px; 
}
h4, 
h5, 
h6 { 
    font-size: 14px; 
}
body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #9aa4c6;
    background: #fff;
    position: relative;
    overflow-x: hidden !important;
}

/* 1.2: Buttons */
.btn{
    font-size: 14px;
    border-radius: 50px;
    padding: 8.5px 27px;
}
.btn:focus,
.form-control:focus {
    box-shadow: none !important;
}
.btn-primary,
.btn-primary:focus, 
.btn-primary.focus,
.btn-primary.disabled, 
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled):active:focus, 
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    color: #fff;
    background-color: #0063f8;
    border-color: #fff;
    box-shadow: none;
}
.btn-primary:hover {
    color: #fff;
    background-color: #2e5ae8;
    border-color: #fff;
}
.btn-secondary,
.btn-secondary:focus, 
.btn-secondary.focus,
.btn-secondary.disabled,
.btn-secondary:disabled,
.btn-secondary:not(:disabled):not(.disabled):active, 
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-secondary:not(:disabled):not(.disabled):active:focus, 
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    color: #fff;
    background-color: #0063f8;
    border-color: #fff;
    box-shadow: none;
}
.btn-secondary:hover {
    color: #0063f8;
    background-color: #fff;
    border-color: #fff;
}
.btn-transparent {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-transparent:hover {
    color: #0063f8;
    background-color: #fff;
}

/* 1.3: Default classes */
.bg-primary {
    background-color: transparent !important;
}
.bg-secondary {
    background-color: transparent !important;
}
.bg-dark {
    background-color: transparent !important;
}
.bg-light {
    background-color: transparent !important;
}
.title-bg-light {
    background-color: #819fff;
}
.title-bg-dark {
    background-color: #2e5ae8;
}
.bg-primary:before {
    background-color: #2e5ae8;
}
.bg-secondary:before {
    background-color: #819fff;
}
.bg-dark:before {
    background-color: #0063f8;
}
.bg-light:before {
    background-color: #f6faff;
}
.bg-rotate:before {
    content: '';
    z-index: -1;
    position: absolute;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: skewY(-6deg);
            transform: skewY(-6deg);
}
.text-light {
    color: #9aa4c6 !important;
}
p, .karla {
    font-family: 'Karla', sans-serif;
}
.poppins {
    font-family: 'Poppins', sans-serif;
}
ul.list-inline > li {
    display: inline-block;
}
ul.list-inline > li:not(:last-child) {
    margin-right: 15px;
}
.form-control {
    font-size: 14px;
}
.form-control:focus {
    border-color: #0063f8;
}
input.parsley-error,
textarea.parsley-error,
select.parsley-error {
    border: 1px solid red !important;
}
.half-gutters {
    margin-right: -7.5px;
    margin-left: -7.5px;
}
.half-gutters > .col,
.half-gutters > [class*="col-"] {
    padding-right: 7.5px;
    padding-left: 7.5px;
}

/* 1.4: Padding */
.pt-175 {
    padding-top: 175px;
}
.pb-175 {
    padding-bottom: 175px;
}
.pt-120 {
    padding-top: 120px;
}
.pb-120 {
    padding-bottom: 120px;
}
.pb-70 {
    padding-bottom: 70px;
}
.mt-70 {
    margin-top: 70px;
}

/* 1.5: Animations */
.animated {
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}
.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.spin {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1s linear infinite;
    width: 70px;
    height: 70px;
    position: absolute;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    border-radius: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
    60% {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
    60% {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*=============================================
    02: Page title 
==============================================*/

.page-title {
    padding-top: 55px;
    padding-bottom: 95px;
}
.page-title h2 {
    color: #fff;
    position: relative;
    margin-bottom: 20px;
    text-transform: capitalize;
}
.page-title h2:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    margin: auto;
    width: 30px;
    height: 2px;
    background: #fff;
}
.page-title a {
    color: #fff;
}
.page-title a:hover {
    color: #ddd;
}
.custom-breadcrumb li {
    font-size: 18px;
    display: inline-block;
}
.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}
.custom-breadcrumb li:last-child a {
    pointer-events: none;
}

/*=============================================
    03: Section/Widget title 
==============================================*/

.section-title {
    padding-bottom: 65px;
}
.section-title h2 {
    margin-top: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
}
.section-title h2:before{
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    width: 50px;
    height: 2px;
    margin: 0 auto;
    background-color: #2e5ae8;
}
.section-title.text-left h2:before{
    margin: 0;
}
.widget-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-weight: bold;
}
.widget-title:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #2e5ae8;
}

/*=============================================
    04: Header
==============================================*/
.main-header{
    padding-top: 20px;
    padding-bottom: 2px;
    position: relative;
    z-index: 999;
    -webkit-transition: all .2s;
            transition: all .2s;
    background-color: #2e5ae8 !important;
}
.main-header.bg-secondary {
    background-color: #819fff !important;
}
.main-header.bg-dark {
    background-color: #0063f8 !important;
}

/* 4.1: Logo */
.main-header .logo {
    padding-top: 8px;
}
.main-header .logo img {
    display: inline-block;
}
.main-header .logo img + img {
    display: none;
}

/* 4.2: Header menu */
.header-menu, .header-menu ul, 
.header-menu ul li, 
.header-menu ul li a, 
.header-menu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
}
.header-menu #menu-button {
    display: none;
}
.header-menu > ul {
    text-align: right;
    margin-top: 7px;
}
.header-menu > ul ul {
    text-align: left;
    z-index: 99999;
}
.header-menu > ul > li {
    display: inline-block;
    padding-bottom: 25px;
}
.header-menu > ul > li + li {
    margin-left: 40px;
}
.header-menu > ul > li + li:before {
    content: '\f111';
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    top: 11px;
    left: -25px;
    color: #fff;
    font-size: 6px;
}
.header-menu > ul > li > a {
    padding: 6px 0;
    color: #fff;
}
.header-menu > ul > li > a:after,
.header-menu > ul > li.active > a:after,
.header-menu > ul > li:hover > a:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 1px;
    background: #fff;
    left: 0;
    right: 0;
    bottom: -3px;
    margin: auto;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.header-menu > ul > li > a:hover:after,
.header-menu > ul > li.active > a:after,
.header-menu > ul > li:hover > a:after {
    width: 100%;
}
.header-menu > ul > li > a > i{
    font-size: 12px;
}
.header-menu ul ul {
    position: absolute;
    left: -9999px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: top .2s ease, opacity .2s ease;
    transition: top .2s ease, opacity .2s ease;
}
.header-menu > ul > li > ul {
    top: 91px;
    background: #fff;
    padding: 10px 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.header-menu > ul > li:hover > ul {
    left: auto;
    top: 40px;
    opacity: 1;
}
.header-menu.align-right > ul > li:hover > ul {
    right: 0;
}
.header-menu ul ul ul {
    top: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.header-menu ul ul ul:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 7px;
    width: 0;
    height: 0;
    border-right: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    z-index: 99;
}
.header-menu ul ul ul:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 10px;
    height: 100%;
    z-index: -1;
}
.header-menu ul ul ul li {
    background: #fff;
}
.header-menu ul ul ul li:first-child{
    padding-top: 10px;
}
.header-menu ul ul ul li:last-child{
    padding-bottom: 10px;
}
.header-menu ul ul > li:hover > ul {
    top: 0;
    left: 188px;
    opacity: 1;
}
.header-menu.align-right ul ul > li:hover > ul {
    left: auto;
    right: 178px;
    padding-left: 0;
    padding-right: 10px;
    opacity: 1;
}
.header-menu ul ul li a {
    width: 180px;
    padding: 5px 20px;
    color: #5e7b97;
    font-size: 13px;
    line-height: 18px;
    position: relative;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.header-menu ul ul li a:hover,
.header-menu ul ul li.active a,
.header-menu ul ul li:hover > a {
    padding-left: 30px;
}
.header-menu ul ul li a:before,
.header-menu ul ul li.active a:before,
.header-menu ul ul li:hover > a:before {
    content: '\f111';
    font-family: 'Font Awesome\ 5 Free';
    position: absolute;
    left: 10px;
    font-size: 6px;
    color: #2e5ae8;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all .2s;
    transition: all .2s;
}
.header-menu ul ul li a:hover:before,
.header-menu ul ul li.active a:before,
.header-menu ul ul li:hover > a:before {
    left: 20px;
    opacity: 1;
}
.header-menu ul ul li a i{
    position: absolute;
    right: 15px;
    top: 8px;
}
.header-menu ul ul li:hover > a, 
.header-menu ul ul li > a:hover, 
.header-menu ul ul li.active > a {
    color: #2e5ae8;
}
.register-button i {
    font-size: 12px;
    margin-right: 10px;
}

/* 4.3: Sticky header */
.main-header.sticking {
    position: fixed;
    top: 0;
    background-color: #fff !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    width: 100%;
}
.sticking .logo img {
    display: none;
}
.sticking .logo img + img {
    display: inline-block;
}
.sticking .header-menu > ul > li > a {
    color: #031b4e;
}
.sticking .header-menu > ul > li:hover > a,
.sticking .header-menu > ul > li.active > a { 
    color: #2e5ae8;
}
.sticking .header-menu > ul > li > a:after, 
.sticking .header-menu > ul > li.active > a:after, 
.sticking .header-menu > ul > li:hover > a:after {
    background-color: #2e5ae8;
}
.sticking .btn-transparent {
    color: #2e5ae8;
    border-color: #2e5ae8;
}
.sticking .btn-transparent:hover {
    background: #2e5ae8;
    color: #fff;
    border-color: #fff;
}
.sticking .header-menu > ul > li + li:before {
    color: #031b4e;
} 

/*=============================================
    05: Banner
==============================================*/

.main-banner {
    padding: 85px 0 160px;
}
.main-banner:before {
    height: 2000px;
}
.banner-content {}
.banner-content h2 {
    color: #fff;
    font-size: 60px;
}
.banner-content p {
    font-size: 18px;
    margin-bottom: 30px;
}
.goDown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -33px;
    margin: auto;
    display: inline-block;
    width: 66px;
    height: 66px;
    border: 3px solid #fff;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    background: #2e5ae8;
    font-size: 18px;
    line-height: 68px;
    cursor: pointer;
}

/*=============================================
    06: Features
==============================================*/

.features {
    margin-bottom: -15px;
    margin-top: -15px;
}
.single-feature {
    text-align: center;
    border: 1px solid #e1eeff;
    border-bottom: 1px solid #2e5ae8;
    padding: 30px 20px 25px;
    margin: 15px 0;
    -webkit-transition: all .2s;
    transition: all .2s;
    height: calc(100% - 30px);
}
.single-feature h3 {
    margin: 15px 0;
}
.single-feature:hover  {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/*=============================================
    07: Home features
==============================================*/

.home-features {
    background: url(../img/home-features.png) no-repeat right top;
}

/* 7.1: Single home feature */
.single-home-feature {}
.single-home-feature h3 {
    margin-top: 15px;
    margin-bottom: 25px;
    padding-top: 30px;
    position: relative;
}
.single-home-feature h3:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 1px;
    background-color: #031b4e;
    left: 0;
    top: 0;
}

/*=============================================
    08: Pricing plans
==============================================*/

.single-pricing-plan {
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    -webkit-transition: all .2s;
    transition: all .2s;
    padding-top: 25px;
    position: relative;
    overflow: hidden;
}
.single-pricing-plan:hover {
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.10);
}
.single-pricing-plan h3 {}
.single-pricing-plan p {
    padding: 0 30px 15px;
    position: relative;
    margin-bottom: 20px;
}
.single-pricing-plan p:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 2px;
    background-color: #2e5ae8;
}
.single-pricing-plan ul {
    padding: 0 30px;
    margin-bottom: 20px;
}
.single-pricing-plan ul li {
    margin: 10px 0;
    color: #7884ac;
}
.single-pricing-plan ul + span {
    font-size: 36px;
    line-height: 36px;
    font-weight: 500;
    color: #031b4e;
    display: block;
    padding: 0 30px;
}
.single-pricing-plan ul + span sup {
    font-size: 16px;
    top: -13px;
    margin-right: 3px;
}
.single-pricing-plan ul + span sub {
    font-size: 14px;
    color: #9aa4c6;
    bottom: 0;
}
.purchase {
    padding: 65px 0 30px;
    z-index: 1;
}
.purchase:before {
    bottom: -22px;
    -webkit-transform: skewY(-9deg);
            transform: skewY(-9deg);
}
.pricing-plans .row > div:nth-child(even) .purchase:before {
    -webkit-transform: skewY(9deg);
            transform: skewY(9deg);
} 
.single-pricing-plan .popular {
    position: absolute;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 2px;
    color: #fff;
    background: #0063f8;
    bottom: 150px;
    right: -50px;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    padding: 0 10px;
}
.single-pricing-plan .popular:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -3px;
    top: 0;
    border-bottom: 20px solid #0063f8;
    border-left: 3px solid transparent;
}
.pricing-plans .row > div:nth-child(odd) .single-pricing-plan .popular {
    bottom: 190px;
}
.pricing-plans .row > div:nth-child(odd) .single-pricing-plan .popular:before {
    border-top: 20px solid #0063f8;
    border-bottom: none;
}

/*=============================================
    09: Why us
==============================================*/

.section-title {
    padding-bottom: 55px;
}
.single-reason {
    margin-bottom: 25px;
}
.single-reason h3 {
    margin-bottom: 30px;
}
.why-us-video-sticky-tape {
    width: calc(100% - 40px);
    margin: auto;
}
.why-us-video:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #031b4e;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.why-us-video p {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 95px;
}
.why-us-video p span {
    display: block;
    font-size: 18px;
    margin-top: 15px;
}

/*=============================================
    10: Review slider
==============================================*/

.review-slider-wrap {
    overflow: hidden;
    margin-left: -15px;
    margin-right: -15px;
}
.review-slider {
    overflow: visible;
    padding: 15px;
}
.single-review {
    background: #fff !important;
    padding: 30px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    overflow: hidden;
    z-index: 0;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.single-review:hover {
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}
.single-review:before {
    height: 30px;
    bottom: -14px;
    -webkit-transform: skewY(-4deg);
            transform: skewY(-4deg);
}
.single-review p {
    color: #7884ac;
    line-height: 24px;
    margin-top: 25px;
}
.review-info {
    overflow: hidden;
}
.review-info i {
    color: #0063f8;
    font-size: 18px;
    background: #f6faff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 100%;
    margin-right: 15px;
}
.review-info h4 {
    margin-bottom: 2px;
    margin-top: 15px;
}
.review-info span {
    font-family: 'Karla', sans-serif;
}

/* Review pagination */
.review-pagination {
    position: inherit;
    margin-top: 5px;
}
.swiper-pagination-bullet {
    margin: 0 2.5px;
    width: 20px;
    height: 5px;
    border: none;
    background: #e1eeff;
    border-radius: 50px;
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.swiper-pagination-bullet-active {
    width: 10px;
    background: #0063f8;
}

/*=============================================
    11: Subscribe
==============================================*/

.news-letter-title p {
    font-size: 18px;
    color: #5e7b97;
    margin-top: 15px;
}
.subscribe-form input:not([type=submit]) {
    height: 50px;
    border: 1px solid #0063f8;
    border-radius: 50px;
    background: transparent;
    padding: 0 30px;
}
.subscribe-form input[type=submit] {
    position: absolute;
    top: 5px;
    right: 5px;
}
.subscribe-form .parsley-errors-list {
    display: none;
}

/*=============================================
    12: News/Blog
==============================================*/

.more-post {
    margin-top: 30px;
}
.more-post li {
    width: 50%;
    float: left;
}
.more-post li:first-child i {
    margin-right: 5px;
}
.more-post li:last-child i {
    margin-left: 5px;
}
.more-post li:last-child {
    text-align: right;
}
.more-post li a {
    -webkit-transition: all .2s;
    transition: all .2s;
}
.more-post li a:not(.disabled):hover {
    letter-spacing: 1px;
    color: #0063f8;
}
a.disabled,
a.disabled:hover {
    color: #ddd;
    pointer-events: none;
}

/* 12.1: Single post */
.single-post {
    border: 1px solid #e1eeff;
    height: 100%;
}
.post-content {
    padding: 25px 30px;
}
.post-info {
    font-size: 13px;
}
.post-info a {
    color: #5e7b97;
}
.post-content h3 a {
    color: #031b4e;
    line-height: 27px;
}
.post-content h3 a:hover {
    color: #0063f8;
}
.post-content p {
    margin-bottom: 20px;
}
.post-content > a {
    -webkit-transition: all .2s;
    transition: all .2s;
}
.post-content > a:hover {
    letter-spacing: 1px;
    color: #2e5ae8;
}
.post-content > a i {
    position: relative;
    top: 1px;
    margin-left: 5px;
}
.blog .single-post {
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

/* 12.2: Sidebar search form */
.search-form {
    position: relative;
}
.search-form input {
    border: 1px solid #e1eeff;
    border-radius: 0;
    font-family: 'Karla', sans-serif;
    height: 50px;
    padding: 0 30px;
    width: calc(100% - 74px);
    float: left;
}
.search-form button {
    width: 74px;
    float: right;
    border: 1px solid #e1eeff;
    border-left: 0;
    text-align: center;
    color: #9aa4ac;
    line-height: 48px;
    padding: 0;
    background: transparent;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.search-form button:focus,
.search-form button:active,
.search-form button:hover {
    border: 1px solid #0063f8;
    border-left: 0;
    color: #fff;
    background: #0063f8;
    outline: none;
    cursor: pointer;
}

/* 12.3: Sidebar widgets */
.sidebar-widget {
    border: 1px solid #e1eeff;
    padding: 25px 30px;
    margin-top: 30px;
}
.sidebar-list {
    margin-bottom: 0;
    font-weight: 500;
}
.sidebar-list li:not(:last-child) {
    border-bottom: 1px solid #e1eeff;
    padding-bottom: 15px;
}
.sidebar-list li:not(:first-child) {
    padding-top: 15px;
}
.sidebar-list li a {
    color: #7884ac;
}
.sidebar-list li a:hover {
    color: #0063f8;
}
.sidebar-list li a span {
    float: right;
}
.sidebar-list li a i {
    font-style: normal;
    color: #031b4e;
}
.sidebar-list li a:hover i {
    color: #0063f8;
}
.sidebar-list.karla {
    font-weight: normal;
}
.tag-list {
    margin-left: -6px;
    margin-bottom: -5px;
}
.tag-list li {
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 10px;
}
.tag-list li a {
    color: #7884ac;
    background: #f6faff;
    display: block;
    padding: 6px 10px;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.tag-list li a:hover {
    background: #0063f8;
    color: #fff;
}

/* 12.4: Blog details */
.blog-details {
    border: 1px solid #e1eeff;
}
.post-image {
    position: relative;
}
.post-image a {
    position: absolute;
    left: 30px;
    bottom: 10px;
    color: #5e7b97;
    background: #fff;
    font-family: 'Karla', sans-serif;
    padding: 2px 10px;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.post-image a:hover {
    color: #fff;
    background: #0063f8;
}
.post-detail-content {
    padding: 25px 30px;
}
.post-detail-content h2 {
    color: #0063f8;
    font-weight: 500;
    margin-bottom: 20px;
}
.post-detail-content p {
    line-height: 24px;
    color: #7884ac;
}
.post-detail-content p b {
    color: #031b4e;
}
.post-detail-content p:not(:last-child) {
    margin-bottom: 20px;
}
.tag-cat-soc {
    padding: 25px 0;
    border-bottom: 1px solid #e1eeff;
}
.tag-cat {
    color: #5e7b97;
    font-size: 13px;
    margin: 0;
}
.tag-cat li + li {
    margin-left: 10px;
}
.tag-cat a {
    color: #5e7b97;
    margin-left: 6px;
}
.tag-cat a:hover {
    color: #031b4e;
}
.share-icons {
    margin: 0;
}
.share-icons li + li {
    margin-left: 10px;
}
.share-icons a {
    font-size: 12px;
}
.share-icons a:hover {
    color: #031b4e;
}
.single-post-page .more-post {
    padding-bottom: 25px;
    border-bottom: 1px solid #e1eeff;
    margin-top: 25px;
}

/* 12.5: Post author */
.post-author {
    margin-top: 45px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e1eeff;
}
.post-author img {
    border-radius: 100%;
    margin-right: 20px;
    margin-top: 5px;
}
.post-author-info {
    border-left: 1px solid #e1eeff;
    overflow: hidden;
    padding-left: 15px;
}
.post-author-info h4 a {
    font-weight: normal;
    color: #5e7b97;
    margin-bottom: 15px;
}
.post-author-info h4 a:hover {
    color: #2e5ae8;
}
.post-author-info p {
    line-height: 24px;
    margin-bottom: 10px;
}

/* 12.6: Post comments */
.post-comments {
    margin-top: 55px;
}
.post-comments h3 {
    margin-bottom: 35px;
}
.main-comment {
    border-bottom: 1px solid #e0f3ff;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.comment-author {
    margin-right: 15px;
}
.comment-author img {
    border-radius: 100%;
}
.comment-content {
    overflow: hidden;
    position: relative;
}
.comment-content > a {
    color: #9aa4ac;
    position: absolute;
    right: -40px;
    top: 0;
    display: inline-block;
    font-family: 'Karla', sans-serif;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.comment-content > a i {
    font-size: 12px;
    margin-right: 7px;
}
.comment-content > a:hover {
    color: #2e5ae8;
    right: 0;
}
.comment-content h4 {
    margin-bottom: 15px;
}
.comment-content h4 a {
    color: #5e7b97;
    font-weight: normal;
}
.comment-content h4 a:hover {
    color: #2e5ae8;
}
.comment-content h4 span {
    color: #9aa4ac;
    font-weight: normal;
    font-size: 13px;
    font-family: 'Karla', sans-serif;
    margin-left: 10px;
}
.comment-content p {
    color: #7884ac;
    line-height: 24px;
    max-width: calc(100% - 70px);
    margin-bottom: 0;
}
.comment-reply {
    margin-left: 65px;
    border-top: 1px solid #e0f3ff;
    padding-top: 30px;
    margin-top: 30px;
}

/* 12.7: Comment form */
.comment-form {
    margin-top: 55px;
}
.comment-form h3 {
    margin-bottom: 30px;
}
.comment-form form div{
    margin-bottom: 15px;
}
.comment-form textarea,
.comment-form input {
    border: 1px solid #e1eeff;
    border-radius: 0;
    height: 40px;
}
.comment-form textarea {
    height: 150px;
}
.comment-form .parsley-errors-list {
    display: none;
}

/*=============================================
    13: Footer
==============================================*/

.main-footer {
    background: #031b4e;
    margin-top: 200px;
    padding-top: 60px;
    z-index: 0;
}
.main-footer:before {
    background-color: #031b4e;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}
.footer-widget {
    margin-bottom: 50px;
}
.footer-widget .widget-title {
    color: #fff;
    font-weight: normal;
}
.footer-widget .widget-title:before {
    background-color: #fff;
    width: 30px;
}

/* 13.1: Footer posts */
.footer-posts {}
.footer-posts p {
    font-size: 13px;
    color: #9aa4c6;
    margin-bottom: 5px;
}
.footer-posts p a {
    color: #9aa4c6;
}
.footer-posts p a:hover {
    color: #fff;
}
.footer-posts h4 a {
    line-height: 24px;
    color: #e0f3ff;
    display: inline-block;
}
.footer-posts h4 a:hover {
    color: #fff;
}
.footer-posts li:not(:last-child) {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-posts li + li p {
    margin-top: 10px;
}

/* 13.2: Footer contacts */
.footer-contacts {}
.footer-contacts ul {}
.footer-contacts ul li {
    position: relative;
    padding-left: 100px;
}
.footer-contacts ul li + li {
    margin-top: 12px;
}
.footer-contacts ul li span {
    position: absolute;
    left: 0;
    width: 100px;
}
.footer-contacts ul li span i{
    float: right;
    font-style: normal;
    margin-right: 5px;
    color: #9aa4c6;
}
.footer-contacts ul li a,
.footer-contacts ul li address {
    font-family: 'Karla', sans-serif;
    color: #9aa4c6;
    margin-bottom: 0;
}
.footer-contacts ul li a:hover {
    color: #fff;
}
.footer-contacts ul li:last-child a {
    color: #e0f3ff;
}
.footer-contacts ul li:last-child a:hover {
    color: #fff;
}
.footer-contacts ul li:last-child a + a {
    margin-left: 12px;
    font-size: 12px;
}

/* 13.3: Footer form */
.footer-form input:not([type=submit]){
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 0;
    margin-bottom: 10px;
    height: 40px;
    padding: 0 10px;
    color: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.footer-form input:not([type=submit]):focus{
    background: rgba(255,255,255,0.1);
}
.footer-form textarea {
    height: 100px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 0;
    color: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.footer-form textarea:focus {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: transparent;
}

.footer-form textarea::-webkit-input-placeholder,
.footer-form input::-webkit-input-placeholder {
    color: #9aa4c6 !important;
}
.footer-form textarea::-moz-placeholder,
.footer-form input::-moz-placeholder {
    color: #9aa4c6 !important;
}
.footer-form input[type=submit] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3.5px 19px;
}
.footer-form .parsley-errors-list {
    display: none;
}

/* 13.4: Bottom footer */
.bottom-footer {
    border-top: 1px solid rgba(255,255,255,0.15);
}
.copyright-text {
    padding: 30px 0;
    display: block;
}
.copyright-text a,
.copyright-text a:hover {
    color: inherit;
    font-weight: 500;
}
.back-to-top {
    color: #031b4e;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 100%;
    display: inline-block;
    line-height: 40px;
    -webkit-transition: all .2s;
    transition: all .2s;
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    margin: auto;
    text-align: center;
}
.back-to-top:hover {
    color: #fff;
    background: #0063f8;
}
.footer-menu {
    margin-bottom: 0;
}
.footer-menu li {
    padding: 30px 0;
}
.footer-menu li:not(:last-child) {
    margin-right: 25px !important;
}
.footer-menu li a {
    color: #9aa4c6;
    font-size: 12px;
}
.footer-menu li a:hover {
    color: #fff;
}

/*=============================================
    14: About us
==============================================*/

.about-us-title h2 {
    line-height: 40px;
}
.about-us-title span {
    font-family: 'Karla', sans-serif;
    font-size: 18px;
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}
.sticky-tape:before,
.sticky-tape:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #0063f8;
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    z-index: -1;
}
.sticky-tape:before {
    left: -20px;
    bottom: -20px;
}
.sticky-tape:after {
    right: -20px;
    top: -20px;
}

/* 14.1: Members */
.single-member {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -webkit-transition: all .2s;
    transition: all .2s;
    margin-bottom: 30px;
}
.single-member:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.member-info {
    padding: 15px 15px 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.member-info:before {
    bottom: -65px;
    -webkit-transform: skewY(-9deg);
            transform: skewY(-9deg);
}
.member-info h4 {
    font-weight: 500;
    margin-bottom: 2px;
}
.member-info span {
    color: #9aa4c6;
    font-family: 'Karla', sans-serif;
}
.member-info ul {
    margin-bottom: 0;
    margin-top: 25px;
}
.member-info ul li {
    display: inline-block;
}
.member-info ul li:not(:last-child) {
    margin-right: 10px;
}
.member-info ul li a {
    font-size: 12px;
    color: #fff;
}
.member-info ul li a:hover {
    color: #ddd;
}

/*=============================================
    15: Counter
==============================================*/

.happy-counter {}
.happy-counter li {
    float: left;
    width: 20%;
}
.happy-counter li span {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: #0063f8;
}
.happy-counter li p {
    color: #7884ac;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/*=============================================
    16: Domain
==============================================*/

/* 16.1: Domain checker */
.domain-checker {
    position: relative;
    top: -30px;
}
.domain-checker .input-group {
    border-radius: 100px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.domain-checker .input-group ul {
    left: 30px;
}
.domain-checker input[type=text] {
    height: 60px;
    border: none;
    padding-left: 30px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    font-family: 'Karla', sans-serif;
}
.domain-checker input[type=submit] {
    border-color: #0063f8;
}

/* 16.2: Domain price */
.domain-price {
    margin-top: 50px;
    margin-bottom: 80px;
}
.domain-price li {
    width: 170px;
    border: 1px solid #e1eeff;
    text-align: center;
    padding: 8px 12px;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.domain-price li:hover {
    border-color: transparent;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.domain-price li > span {
    display: block;
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: #0063f8;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.domain-price li > span:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 1px;
    background: #0063f8;
}
.domain-price p {}
.domain-price p span {
    font-size: 18px;
    color: #031b4e;
}

/* 16.3: Domain table */
.domain-table {
    margin-bottom: 30px;
}
.domain-table .thead-dark th {
    background-color: #031b4e;
    border-color: #031b4e;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 10px;
    vertical-align: middle;
}
.domain-table td {
    padding: 18px 10px;
}
.domain-table tbody {
    font-size: 16px;
    color: #7884ac;
}
.domain-table tbody span {
    font-weight: bold;
    color: #031b4e;
}
.domain-table tbody a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.domain-table tbody a:hover {
    color: #2e5ae8;
    letter-spacing: 1px;
}
.domain-table tbody i {
    font-size: 12px;
}
.domain-table tbody i.fa-times {
    color: #ff0000;
}
.domain-table tbody i.fa-check {
    color: #008000;
}
.domain-table tbody td {
    border-color: #e1eeff;
    width: 25%;
    vertical-align: middle;
}
.domain-table tbody tr {
    -webkit-transition: all .2s;
    transition: all .2s;
}
.domain-table tbody tr:hover {
    background-color: transparent;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/*=============================================
    17: Contact
==============================================*/

.contact-content {
    margin-bottom: 55px;
}
.contact-content h2 {
    font-size: 24px;
    line-height: 34px;
    font-weight: normal;
    margin-bottom: 30px;
}
.contact-content h2 span {
    font-weight: bold;
}
.contact-content p {
    font-size: 18px;
    color: #7884ac;
}
.contact-content ul {}
.contact-content ul li {
    color: #7884ac;
    font-family: 'Poppins', sans-serif;
}
.contact-content ul li span {
    color: #031b4e;
    display: inline-block;
    width: 120px;
}
.map {
    border: 1px solid #f7f7f7;
}
.contact-info li {
    position: relative;
    padding-left: 75px;
    color: #7884ac;
    margin-bottom: 20px;
}
.contact-info li span {
    position: absolute;
    left: 0;
    font-family: 'Poppins', sans-serif;
    color: #031b4e;
}
.contact-info li a {
    color: #7884ac;
}
.contact-info li a:hover {
    color: #0063f8;
}
.contact-social-icons a:hover {
    color: #2e5ae8;
}
.contact-form div {
    margin-bottom: 30px;
}
.contact-form input {
    height: 40px;
    border-radius: 0;
    border-color: #e1eeff;
}
.contact-form textarea {
    height: 200px;
    border-radius: 0;
    border-color: #e1eeff;
}
.contact-form div div .parsley-errors-list {
    left: 30px;
}

/*=============================================
    XX: 404
==============================================*/

.not-found-title {
    background: #2e5ae8;
    min-height: 580px;
    overflow: hidden;
    z-index: 0;
    padding-top: 30px;
}
.not-found-title img {}
.not-found-title h2 {
    font-size: 48px;
    margin-top: 135px;
    margin-bottom: 15px;
}
.not-found-title a {
    color: #fff;
}
.not-found-title a:hover {
    text-decoration: underline;
    color: #fff;
}
.not-found-title .svg {
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
    bottom: 0;
    z-index: -1;
}
.not-found-content h3 {
    font-size: 24px;
    line-height: 34px;
    color: #7884ac;
    margin-bottom: 60px;
}
.not-found-content form input[type=text] {
    border-color: #e1eeff;
    background: #f6faff;
}
.not-found-content form input[type=text]:focus {
    border-color: #0063f8;
}

/*=============================================
    18: Others
==============================================*/

.preLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0063f8;
    z-index: 99999;
    overflow: hidden;
}
.our-clients li img {
    border: 1px solid #ebebeb;
}
.parsley-errors-list {
    list-style: none;
    padding: 0;
    position: absolute;
    left: 15px;
    margin: 0;
    bottom: -18px;
    text-align: center;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.parsley-errors-list li {
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    line-height: 18px;
    background: red;
    color: #fff;
    padding: 0 10px;
}
[data-animate] {
    visibility: hidden;
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
}
[data-animate].animated {
    visibility: visible;
}