/*===============================================
Template Name:itjsgou - IT Startup & Business Solution HTML5 Template
Author:  https://templatemonster/author/drtheme
Description: Description
Version: 1.0.0
Text Domain: itjsgou
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. itjsgou Header Top Menu Area Css
02. itjsgou Nav Menu Area Css 
03. itjsgou Slider Area Css
04. itjsgou Section Title Css
05. itjsgou Service Area css
06. itjsgou About Area Css
07. itjsgou Counter Area Css
08. itjsgou Case Study Area Css
09. itjsgou Testimonial Area Css
10. itjsgou Process Area Css
11. itjsgou Team Area Css
12. itjsgou Faq Area Css
13. itjsgou Brand Section Css
14. itjsgou Call Do Section Css
15. itjsgou Form Box Css
16. itjsgou Skill Area Css
17. itjsgou Blog Area Css
18. itjsgou footer Area Css
19. itjsgou Subscribe Area Css
20. itjsgou Lines CSS
21. itjsgou Prossess Ber Css
22. itjsgou Scrollup Section
23. itjsgou Bounce Animation Css 
24. itjsgou Animation Dance
25. itjsgou Breadcumb Area Css
26. itjsgou abouts_areas Css
27. itjsgou Feture-Area Css
28. itjsgou Pricing Section Css
29. itjsgou Web Development Section CSS
30. itjsgou Contact  US Css
31. itjsgou Blog Sidber Widget CSS
32. itjsgou Case Study Details Css
33. itjsgou Search Box Css
34. itjsgou Loader Css
=======================*/



/*==========================================
<--  itjsgou Nav Menu Area Css -->
============================================*/
.itjsgou_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    background: transparent;
    margin-bottom: -99px;
}

.sticky-header .itjsgou_nav_manu::before {
    background: #001442 !important;
}


.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #00295A !important;
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .itjsgou_menu>ul>li>a {
    color:#fff;
}

.sticky.itjsgou_nav_manu::before {
    display: none;
}

.sticky .itjsgou_menu>ul>li>a i {
    color: #fff;
    transition: 0.5s;
}

.sticky .header-button a {
}

.sticky .header-button a i {
    color: #fff;
}

/* itjsgou Menu Css*/
nav.itjsgou_menu {
    display: inline-block;
    float: right;
}

.itjsgou_menu ul {
    list-style: none;
    display: inline-block;
}

.itjsgou_menu>ul>li {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.itjsgou_menu>ul>li>a {
    font-size: 17px;
    margin: 80px 12px;
    transition: .5s;
    color: #fff;
    font-weight: 400;
    line-height:50px;
    font-family: 'microsoft yahei','Cabin', sans-serif;
}

nav.itjsgou_menu span {
    font-size: 13px;
    padding-left: 5px;
    opacity: 0.5;
}

.header-button {
    display: inline-block;
    margin-left: 12px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}

.header-button::before{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 25px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
    opacity: 0;
}

/* header-button hover */
.header-button:hover:before{
    transform: scale(1);
    opacity: 1;
}

.header-button a {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0;
    text-transform: capitalize;
}

.header-button:hover a{
    color: #0c5adb !important;
}

/*** Sub Menu Style 
==========================***/

.itjsgou_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 87%;
    width: 270px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    visibility: hidden;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    transform: scaleY(0);
    transform-origin: center top 0;
    transition: all 0.5s ease-in-out;
}

.itjsgou_menu ul li:hover>.sub-menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
    z-index: 9;
    left: 0;
    transform: scaleY(1);
}

.itjsgou_menu ul .sub-menu li {
    position: relative;
}

.itjsgou_menu ul .sub-menu li a {
    display: block;
    padding: 16px 28px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .1s;
    transition: .1s;
    visibility: inherit !important;
    color: #616161 !important;

}

.itjsgou_menu ul .sub-menu li:hover>a,
.itjsgou_menu ul .sub-menu .sub-menu li:hover>a,
.itjsgou_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.itjsgou_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
    background: linear-gradient(to right, #0C5ADB, #3B35AD);
    color: #fff !important;
}

/* sub menu 2 
=================*/

.itjsgou_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.itjsgou_menu ul .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

/* sub menu 3 
==================*/

.itjsgou_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.itjsgou_menu ul .sub-menu .sub-menu .sub-menu {
    right: 100%;
    left: auto;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.itjsgou_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

ul.sub-menu li a span {
    background: #2871FE;
    padding: 5px 10px;
    color: #fff;
    opacity: 1;
    font-family: 'microsoft yahei','Fira Sans';
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span{
    background: rgba(255,255,255, 0.20);
}

/* sub menu 4 
====================*/

.itjsgou_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}


.itjsgou_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

.itjsgou_menu li a:hover:before {
    width: 101%;
}

.itjsgou_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.itjsgou_nav_manu.sticky .main_sticky {
    display: inherit;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

.header-button {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 8px 30px;
}

 /*
 <!-- ===================================-->
<!-- Start itjsgou hero Section Css -->
<!-- ===================================-->*/

.hero-section {
    background: url(../image/banner-img.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hero-title h5 {
    display: inline-block;
    color: #FFFFFF;
    font-size: 18px;
    margin-bottom: 17px;
}

.hero-title h1 {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 800;
    line-height: 52px;
    margin-bottom: 20px;
    margin-top: 0;
}

.hero-text p {
    color: #FFFFFF;
    margin-bottom: 16px;
    width: 88%;
}

.hero-button {
    display: flex;
    margin-top: 35px;
}

.hero-main-button{
    background-color: transparent;
    background-image: linear-gradient(350deg, #0C5ADB 11%, #4D46B4 72%);
}

.hero-main-button a {
    display: inline-block;
    font-weight: 600;
    border-radius: 4px;
    padding:13px 35px;
    color: #ffffff;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.hero-main-button a::before{
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.hero-main-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.hero-main-button a:hover::before {
    width: 100%;
    z-index: -1;
}

.hero-right-button {
    margin-left: 28px;
}

.hero-right-button{
    background-color: transparent;
    background-image: linear-gradient(350deg, #0C5ADB 11%, #4D46B4 72%);
}

.hero-right-button a{
    display: inline-block;
    font-weight: 600;
    border-radius: 4px;
    padding:13px 35px;
    color: #fff; 
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.hero-right-button a::before{
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.hero-right-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.hero-right-button a:hover::before {
    width: 100%;
    z-index: -1;
}

.hero-thumb img {
    width: 96%;
}

.hero-thumb {
    animation: up-down 3s linear infinite;
}

@keyframes up-down{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}

 /*
 <!-- ===================================-->
<!-- Start itjsgou hero Section Css -->
<!-- ===================================-->*/
.service-area {
    padding: 60px 0 70px;
}

.itjsgou-section-title.text-center {
    margin: auto;
    text-align: center;
    margin-bottom: 45px;
}

.itjsgou-section-title h5 {
    color: #0c5adb;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 5px;
    margin: 0 0 15px;
}

.itjsgou-section-title h3, .itjsgou-section-title h2{
    font-size:1.3125rem;
    margin-bottom: 0px;
    text-transform: capitalize;
    margin-top: 0;
    line-height: 1.2;
    font-weight: 800;
}

.bar-main {
    margin: 18px 0 35px;
}

.bar.bar-big {
    height: 5px;
    width: 98px;
    background: #aec6ef;
    margin: 20px auto;
    position: relative;
    border-radius: 30px;
}

.t_center .bar.bar-big::before {
    margin: auto;
}

.bar.bar-big::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2.7px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #2871FE;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}

@-webkit-keyframes MOVE-BG {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(88px);
              transform: translateX(88px);
    }
  }
  
  .single-service-box {
    padding: 36px 35px;
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 5px 20px 0 rgb(210 210 245 / 50%);
    border-radius: 5px;
    margin-bottom: 30px;
}

.single-service-box::before {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    content: "";
    background-image: -webkit-linear-gradient(0deg, #4527a4 0%, #0289e7 100%);
    transition: all 500ms ease;
    transition: .3s;
    z-index: -1;
    opacity: 0;
    border-radius: 4px;
}

.single-service-box:hover::before{
    width: 100%;
    height: 100%;
    opacity: 1;
}

.single-service-box:hover .service-icon span{
    background-color: #fff;
}

.single-service-box:hover .service-box-title h2{
   color: #fff;
}

.single-service-box:hover .service-box-desc p{
    color: #fff;
 }

 .single-service-box:hover .service-btn a{
    color: #fff;
 }
 .single-service-box:hover sup a{
    color: #fff;
 }
.service-icon span {
    color: #0C5ADB;
    font-size: 35px;
    width: 95px;
    height: 65px;
    background: rgba(23,92,255,.2);
    line-height: 65px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 29px;
    display: inline-block;
}

.service-box-title h2 {
    margin: 0 0 10px 0;
    font-size: 21px;
    padding: 0;
}

.service-btn {
    margin-top: 20px;
}

.service-btn > a {
    border-radius: 30px;
    color: #616161;
    display: inline-block;
    font-size: 16px;
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    font-weight: 700;
}

.service-btn > a i {
    margin-left: 7px;
    font-size: 17px;
    font-weight: 600;
}

 /*
 <!-- ===================================-->
<!-- Start itjsgou hero Section Css -->
<!-- ===================================-->*/
.about-area {
    padding: 60px 0 60px;
    background-color: #F5F9FF;
}

.itjsgou-section-title.text-left {
    margin: auto auto auto 0;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}

.itjsgou-section-title.text-left .bar.bar-big{
    height: 5px;
    width: 98px;
    background: #aec6ef;
    margin: 20px 0;
    border-radius: 30px;
}

.itjsgou-section-title.text-left span {
    color: #0c5adb;
    padding-left: 10px;
}

.itjsgou-section-title.text-left p {
    font-size: 16px;
    margin: 0;
    width: 90%;
    text-align:justify;
    line-height:1.5;
}

.about-content-inner {
    display: flex;
    margin-bottom: 20px;
}

.about-content-inner-text h2 {
    color: #232323;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.about-content-icon i {
    color: #0c5adb;
    display: inline-block;
    text-align: center;
}

.about-content-icon {
    margin-right: 19px;
}

.about-content {
    margin-top: 32px;
}

.about-content-inner-text h2 {
    color: #232323;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.about-button {
    margin-top:19px;
}

.about-button a {
    display: inline-block;
    background-color: #0C5ADA;
    font-size: 15px;
    border-radius: 3px;
    font-weight: 600;
    color: #fff;
    transition: all .3s;
    padding: 14px 35px 13px 35px;
    position: relative;
    z-index: 1;
}

.about-button a::before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.about-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.about-button a:hover::before {
    width: 100%;
    z-index: -1;
}

.about-button a i {
    margin-left: 6px;
}

.about-thumb {
    animation: up-down 3s linear infinite;

}

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

 /*
 <!-- ===================================-->
<!-- Start itjsgou counter-area Css -->
<!-- ===================================-->*/
.counter-area {
    background-color: #0C5ADB;
    padding: 96px 0;
}

.counter-single-box {
    display: flex;
    align-items: center;
}

.counter-icon i {
    color: #fff;
    display: inline-block;
    font-size: 50px;
}

.counter-number h2 {
    display: inline-block;
}

.counter-number h2 {
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    display: inline-block;
}

.counter-text span {
    text-transform: capitalize;
    font-size: 18px;
    margin-top: 2px;
    font-weight: 700;
    color: #fff;
}

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

/*============================================
<-- start itjsgou about us area Css -->
==============================================*/
.about-us-area {
    padding: 60px 0 60px;
}

.row.about-box {
    margin-top: 34px;
}

.about-single-box {
    display: flex;
    padding: 0 7px 0 0;
    box-shadow: 0 2px 48px 0 rgb(0 0 0 / 8%);
    background: #fff;
    align-items: center;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.about-single-box::before{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0px;
    height: 100%;
    content: "";
    background-image: -webkit-linear-gradient(0deg, #4527a4 0%, #0289e7 100%);
    transition: all 500ms ease;
    transition: .3s;
    z-index: -1;
    opacity: 0;
    border-radius: 5px;
}

.about-single-box:hover::before{
    opacity: 1;
    width: 100%;
}

.about-single-box:hover .about-title h2{
    color: #fff;
}

.about-icon {
    padding: 10px 12px;
    border-radius: 5px 0 0 5px;
    background-image: -webkit-linear-gradient(0deg, #4527a4 0%, #0289e7 100%);
    transition: all 500ms ease;
    margin-right: 15px;
}

.about-icon i {
    font-size: 26px;
    color: #fff;
    display: inline-block;
    text-align: center;
}

.about-title h2 {
    margin: 0;
    transition: .3s;
    font-size: 16px;
}

.about-us-thumb {
    animation: up-down 3s linear infinite;

}

.about-us-thumb img {
    width: 100%;
}

/*============================================
<-- itjsgou about-section Css -->
==============================================*/
.about-us-section {
    background-color: #F5F9FF;
    padding: 60px 0 60px;
}


.about-section-thumb {
    animation: up-down 3s linear infinite;
    margin-right: 100px;
}

.about-section-thumb img {
    width: 100%;
}


/*============================================
<-- itjsgou team area Css -->
==============================================*/
.team-area {
    padding: 60px 0 30px;
}

.single-team-box {
    transition: .3s;
    box-shadow: 0px 5px 20px 0px rgb(82 90 101 / 10%);
    margin-bottom: 30px;
}

.team-thumb img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.team-social-icon {
    position: absolute;
    width: 87%;
    background: #0B7DDF;
    padding: 7px 0;
    transition: all 0.4s ease 0s;
    border-radius: 4px 4px 0 0;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -38px;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}

.single-team-box:hover .team-social-icon {
    opacity: 1;
    visibility: visible;
    bottom: 0;
}


.team-social-icon ul li {
    list-style: none;
    display: inline-block;
    margin-right: 22px;
}

.team-social-icon ul li a i {
    color: #fff;
    font-size: 15px;
}

.team-thumb {
    position: relative;
    overflow: hidden;
}

.team-thumb::before{
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 0;
    width: 100%;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(60,52,173,0.2) 0%,rgba(17,113,215,1) 150%) repeat scroll 0 0;
    border-radius: 5px;
    transition: all .35s ease-in-out;
}

.single-team-box:hover:hover .team-thumb::before{
    height: 100%;
}


.single-team-title h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
    color: #222;
}

.single-team-title h3 a {
    transition: 0.5s;
}

.single-team-title h3 a:hover{
    color: #0c5adb; 
}

span.team-desi {
    font-size: 13px;
    color: #0c5adb;
    float: none;
    text-align: center;
    font-weight: 500;
}

.single-team-title {
    padding: 24px 20px;
    color: #444;
    text-align: center;
    background: #fff;
    height:200px;
}

/*============================================
<!-- Start itjsgou  Video Area -->
==============================================*/
.video-area {
    padding: 0;
    background: url(../image/bg3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.video-area::before {
    position: absolute;
    content: '';
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}

.call-to-action.style-one {
    text-align: center;
    position: relative;
}

.video-icon {
    margin-bottom: 35px;
}

.video-icon {
      text-align: center;
    opacity: 0.6;
}

.video-icon a {
    width: 60px;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    color: #0c5adb;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    -webkit-transition: .5s;
    background: #fff;
    font-size: 25px;
    z-index: 1;
}

.single_call-to-action_text {
    text-align: center;
}

.call-to-action-title h3 {
    font-size: 18px;
    display: block;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 20px auto 0;
    font-weight: 700;
    color: #fff;
    margin-top: 41px;
}

.call-to-action.style-one .call-to-action-title h2 {
    width: 47%;
}

.call-to-action-title h2 {
    margin-bottom: 12px;
    font-size: 2rem;
    margin: 20px auto;
    text-transform: capitalize;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
}

.call-to-action-desc {
    width: 40%;
    margin: auto;
    color: #fff;
}

.call-to-action-btn {
    margin-top: 30px;
}

.call-to-action-btn a {
    border: none;
    display: inline-block;
    text-transform: capitalize;
    background-color: #0c5adb;
    border-radius: 4px;
    color: #fff;
    padding: 16px 32px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.call-to-action-btn a::before{
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.call-to-action-btn a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.call-to-action-btn a:hover::before {
    width: 100%;
    z-index: -1;
}

@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}

/*============================================
	<!-- Start itjsgou Testimonial Area -->
==============================================*/
.testimonial-area {
    padding: 100px 0 70px;
}

.single-testimonial {
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    position: relative;
    margin-top: 40px;
    text-align: center;
    margin-bottom: 30px;
    padding: 25px;
    background: #F5F9FF;
    border-radius: 5px;
}

.testimonial-thumb {
    display: inline-block;
    float: none;
    margin: 0;
    text-align: center;
}

.testimonial-thumb img {
    width: 100%;
    border-radius: 100%;
}

.testi-text p {
    padding: 23px 0 5px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    width: 87%;
    margin: auto;
}

.testimonial-content h2 {
    font-size: 18px;
    margin-bottom: 0px;
    text-transform: capitalize;
    letter-spacing: 0;
    font-weight: 700;
}

.testimonial-content span {
    color: #0c5adb;
    font-weight: 500;
    font-size: 16px;
    display: block;
    padding-top: 8px;
}

/*============================================
<!-- start itjsgou blog area -->
==============================================*/
.blog-area {
    padding: 0px 0 120px;
}

.single-blog {
    margin-bottom: 30px;
    box-shadow: 0px 3px 22px 0px rgb(44 130 237 / 15%);
    position: relative;
    transition: 0.5s;
}

.single-blog:hover:hover{
    -webkit-box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 20%);
    box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 25%);
}

.blog-meta-top {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 1;
}

.blog-meta-top span {
    display: inline-block;
    background: #0C5ADB;
    padding: 7px 14px;
    line-height: 19px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    transition: 05s;
}

.blog-meta span:hover {
    color: #0C5ADB;
}

.blog-thumb img {
    width: 100%;
}


.team-thumb {
    position: relative;
    overflow: hidden;
}

.blog-thumb {
    position: relative;
    overflow: hidden;
}

.blog-thumb::before{
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 0;
    width: 100%;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(60,52,173,0.2) 0%,rgba(17,113,215,1) 150%) repeat scroll 0 0;
    border-radius: 5px;
    transition: all .35s ease-in-out;
}

.single-blog:hover:hover .blog-thumb::before{
    height: 100%;
}

.blog-thumb img {
    width: 100%;
    border-radius: 3px 3px 0 0;
}

.blog-content {
    padding: 25px 30px 25px;
}

.blog-meta a {
    display: inline-block;
    text-transform: capitalize;
    margin-right: 24px;
    color: #616161;
    font-weight: 500;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.blog-meta a:hover{
    color: #0C5ADB; 
}

.blog-meta a::before {
    content: "";
    background: #616161;
    width: 1px;
    height: 14px;
    position: absolute;
    right: -15px;
    top: 5px;
    z-index: -1;
}

.blog-meta-title h2 {
    font-size: 24px;
    margin: 10px 0 7px;
    line-height: 1.2;
}

.blog-meta-title h2 a{
    margin-bottom: 0;
    text-transform: none;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    color: #232323;
    font-weight: 700; 
}

.blog-meta-title h2 a:hover{
    color:#0C5ADB;
}

.blog-meta-desc p {
    margin: 16px 0 15px;
}


/*owl-dot*/
.owl-dots {
    position: absolute;
    left: 50%;
    bottom: -36px;
    border-radius: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.owl-dot {
    background: #bfcadc;
    height: 5px;
    width: 25px;
    display: inline-block !important;
    margin: 0 3px;
    border-radius: 50px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.owl-dot.active {
    background: #0C5ADB;
    width: 35px;
}

/*============================================
<!-- start itjsgou brand-area -->
==============================================*/
.brand-area {
    padding: 60px 0 60px 0;
    background-color: #F5F9FF;
}

.brand-box {
    text-align: center;
}
.owl-carousel .owl-item img {
    display: inline-block !important;
}

/*============================================
<!-- Start itjsgou Footer Area -->
==============================================*/
.footer-area {
    padding: 100px 0 5px 0;
    background: url(../image/footer.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.footer-discription p {
    color: #fff;
    margin: 23px 0 29px;
    padding-top: 20px;
}

.footer-widget-social ul li {
    list-style: none;
    display: inline-block;
}

.footer-widget-social ul li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #fff;
    color: #0B7CDE;
    border-radius: 4px;
    text-align: center;
    margin-right: 8px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.footer-widget-social ul li a::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(60,52,173,0.2) 0%,rgba(17,113,215,1) 150%) repeat scroll 0 0;
    border-radius: 4px;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.footer-widget-social ul li a:hover{
    color:#fff;
} 

.footer-widget-social ul li a:hover::before{
    transform: scale(1);
}

.footer-title h3 {
    color: #ffffff;
    font-size: 22px;
    font-family: 'microsoft yahei','Nunito Sans';
}

.footer-widget-service {
    padding-top: 25px;
    margin-top: 20px;
}

.footer-widget-service ul li {
    list-style: none;
    padding-bottom: 14px;
}

.footer-widget-service ul li a {
    color: #fff;
    transition: 0.5s;
}

.footer-widget-service ul li a:hover{
    color: #f00;
}

.footer-widget-address p {
    color: #fff;
    margin-bottom: 20px;
    transition: 0.5s;
}

.footer-widget-address p:hover{
    color:#f00;
}

.footer-widget-address {
    padding-top: 25px;
    margin-top: 20px;
}

.company-email {
    display: flex;
    margin: 24px 0 2px;
}

.email-icon {
    padding-right: 20px;
}

.email-icon i {
    display: inline-block;
    color: #ffffff;
    font-size: 32px;
}

.company-email-title h6 {
    color: #FFFFFF;
    margin: 0px 0px 3px 0px;
    font-size: 16px;
    font-weight: 400;
}

.company-email-title h6:hover {
    color: #f00;
}

.company-phone {
    display: flex;
}

.phone-icon {
    padding-right: 20px;
}

.phone-icon i{
    display: inline-block;
    color: #ffffff;
    font-size: 32px;
}

.company-phone-title h6 {
    color: #FFFFFF;
    margin: 0px 0px 3px 0px;
    font-size: 16px;
    font-weight: 400;
    transition: 0.5s;
}

.company-phone-title h6:hover{
    color:#f00;
}

.widget-desc {
    padding-top: 25px;
    margin-top: 20px;
}

.widget-desc p {
    color: #fff;
}

input.src-input-box {
    padding: 15px 30px 15px;
    margin-bottom: 20px;
}

.subscribe-widget input {
    font-size: 14px;
    width: 100%;
    border-radius: 4px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-area ::placeholder {
    color: #fff;
    font-size: 16px;
}

.subscribe-widget button {
    width: 100%;
    background: #0c5adb;
    padding: 19px 10px;
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.subscribe-widget button:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform: scale(0.0, 1);
    transition: .5s;
    border-radius: 5px;
    
}

.subscribe-widget button:hover {
    color: #000;
   
}

.subscribe-widget button:hover:before {
    transform: scale(1);

   
}

.footer-bottom-left p {
    color: #ffffff;
    transition: 0.5s;
}

.footer-bottom-left p:hover {
    color: #f00;
}

.footer-right-content {
    text-align: right;
}

.footer-right-content ul li {
    list-style: none;
    display: inline-block;
}

.footer-right-content ul li a {
    color: #fff;
    margin-left: 15px;
    transition: 0.5s;
}

.footer-right-content ul li a:hover {
    color: #f00;
}

.row.footer-bottom {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-width: 1px 0 0;
    margin-top:65px;
    padding-top: 25px;
}

/*============================================
<-- itjsgou Home two header top -->
==============================================*/
.header-top-area {
    padding: 10px 0;
    background: #0c5adb;
}

.header-address-info ul li {
    list-style: none;
    display: inline-block;
}

.header-address-info ul li a i {
    font-size: 15px;
    color: #fff;
    margin-right: 10px;
}

.header-address-info ul li span {
    font-size: 15px;
    color: #fff;
    margin-right: 10px;
}

.header-address-info ul li i {
    font-size: 15px;
    color: #fff;
    margin-right: 10px;
}

.header-top-right-social {
    text-align: right;
}

.header-top-right-social ul li {
    list-style: none;
    display: inline-block;
}

.header-top-right-social ul li {
    list-style: none;
    display: inline-block;
    margin-left: 18px;
}

.header-top-right-social ul li a {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}


/*==========================================
<--  itjsgou Nav Menu Area Css -->
============================================*/
.itjsgou_nav_manu-two {
}

.sticky-header .itjsgou_nav_manu::before {
    background: #001442 !important;
}


.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #00295A !important;
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .itjsgou_menu-two>ul>li>a {
    color:#fff;
}

.sticky.itjsgou_nav_manu::before {
    display: none;
}

.sticky .itjsgou_menu>ul>li>a i {
    color: #fff;
    transition: 0.5s;
}

.sticky .header-button a {
}

.sticky .header-button a i {
    color: #fff;
}

/* itjsgou Menu Css two*/
nav.itjsgou_menu-two {
    display: inline-block;
    float: right;
}

.itjsgou_menu-two ul {
    list-style: none;
    display: inline-block;
}

.itjsgou_menu-two>ul>li {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.itjsgou_menu-two>ul>li>a {
    font-size: 17px;
    display: block;
    margin: 30px 12px;
    transition: .5s;
    color: #222;
    font-weight: 400;
    font-family: 'microsoft yahei','Cabin', sans-serif;
}

.itjsgou_menu-two>ul>li>a:hover{
    color:#0C5ADB;
}

nav.itjsgou_menu-two span {
    font-size: 13px;
    padding-left: 5px;
    opacity: 0.5;
}

nav.itjsgou_menu-two span:hover{
    color:#0C5ADB; 
}

/*** Sub Menu Style 
==========================***/

.itjsgou_menu-two ul .sub-menu {
    position: absolute;
    left: 0;
    top: 87%;
    width: 270px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    visibility: hidden;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    transform: scaleY(0);
    transform-origin: center top 0;
    transition: all 0.5s ease-in-out;
}

.itjsgou_menu-two ul li:hover>.sub-menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
    z-index: 9;
    left: 0;
    transform: scaleY(1);
}

.itjsgou_menu-two ul .sub-menu li {
    position: relative;
}

.itjsgou_menu-two ul .sub-menu li a {
    display: block;
    padding: 16px 28px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .1s;
    transition: .1s;
    visibility: inherit !important;
    color: #616161 !important;

}

.itjsgou_menu-two ul .sub-menu li:hover>a,
.itjsgou_menu-two ul .sub-menu .sub-menu li:hover>a,
.itjsgou_menu-two ul .sub-menu .sub-menu .sub-menu li:hover>a,
.itjsgou_menu-two ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
    background: linear-gradient(to right, #0C5ADB, #3B35AD);
    color: #fff !important;
}

/* sub menu 2 
=================*/

.itjsgou_menu-two ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.itjsgou_menu-two ul .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

/* sub menu 3 
==================*/

.itjsgou_menu-two ul .sub-menu .sub-menu li {
    position: relative;
}

.itjsgou_menu-two ul .sub-menu .sub-menu .sub-menu {
    right: 100%;
    left: auto;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.itjsgou_menu-two ul .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

ul.sub-menu li a span {
    background: #2871FE;
    padding: 5px 10px;
    color: #fff;
    opacity: 1;
    font-family: 'microsoft yahei','Fira Sans';
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span{
    background: rgba(255,255,255, 0.20);
}

/* sub menu 4 
====================*/

.itjsgou_menu-two ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}


.itjsgou_menu-two ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

.itjsgou_menu-two li a:hover:before {
    width: 101%;
}

.itjsgou_nav_manu-two.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.itjsgou_nav_manu-two.sticky .main_sticky {
    display: inherit;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

.header-src-btn {
    display: inline-block;
    position: relative;
    padding-right: 50px;
    top: 10px;
    margin-left: 24px;
}

.search-box-btn.search-box-outer {
    position: absolute;
    bottom: 4px;
    right: 35px;
}

.search-box-btn.search-box-outer i {
    display: inline-block;
    border-radius: 3px;
    height: 30px;
    text-align: center;
    width: 30px;
    line-height: 30px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    margin-top: 0px;
    background: #0C5ADB;

}

/*-- header about button --*/
.header-btn {
    display: inline-block;
    margin-left: 5px;
}

.header-btn a {
    background: #0c5adb;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    padding: 10px 26px;
    transition: all 0.3s ease 0s;
    border-radius: 3px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.header-btn a::before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.header-btn a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

/*==========================================
    purify Search Popup Css
=========================================*/

.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background:#0C5ADB; 
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: #ffffff;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:#ffffff;
}


.search-box-btn.search-box-outer i {
    font-size: 15px;
    display: inline-block;
    color: #fff;
    cursor: pointer;
}

.sticky .search-box-btn.search-box-outer i{
    color:#fff;
}



/*============================================
<!-- Start itjsgou banner Section  -->
==============================================*/
.banner-section {
    background: url(../image/hero-two-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 740px;
}

.banner-title h5 {
    color: #0C5ADB;
    font-size: 18px;
    line-height: 20px;
    display: inline-block;
    margin-bottom: 20px;
}

.banner-title h1 {
    font-size: 49px;
    font-weight: 800;
    line-height: 52px;
    margin-bottom: 20px;
    margin-top: 0;
}

.banner-text p {
    margin-bottom: 16px;
    width: 88%;
}

.banner-button {
    margin-top: 35px;
}

.banner-button a {
    display: inline-block;
    background-color: #0C5ADA;
    font-size: 15px;
    border-radius: 3px;
    font-weight: 600;
    color: #fff;
    transition: all .3s;
    padding: 14px 35px 13px 35px;
    position: relative;
    z-index: 1;
}

.banner-button a::before{
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.banner-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.banner-button a i {
    margin-left: 6px;
}

.banner-thumb {
    animation: up-down 3s linear infinite;
}

.banner-thumb img {
    width: 100%;
}

/*============================================
<!-- Start itjsgou feature-area  -->
==============================================*/
.feature-area {
    padding: 100px 0 100px;
}

.signal-feature-box {
    padding: 55px 28px 21px;
    text-align: center;
    position: relative;
    background: #fff;
    transition: .5s;
    z-index: 1;
    box-shadow: 0px 0 6px rgba(26, 46, 85, 0.10);
    border-radius: 4px;
    margin-bottom: 30px;
}

.signal-feature-box::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 50%;
    background-image: -webkit-linear-gradient(0deg, #4527a4 0%, #0289e7 100%);
    z-index: -1;
    transition: .5s;
    border-radius: 5px;
}

.signal-feature-box:hover::before{
    left: 0;
    width: 100%;
}

.signal-feature-box:hover .feature-box-title h2{
    color:#fff;
}

.signal-feature-box:hover .feature-box-description{
    color:#fff;
}

.feature-thumb img {
    width: 80%;
    margin: 0 auto 0;
}

.feature-box-title h2 {
    margin: 25px 0 15px 0;
    transition: .5s;
    font-size: 21px;
    font-weight: 700;
}

.feature-description {
    text-align: center;
    margin-top: 35px;
}

.feature-description span a {
    color: #0C5ADB;
}

/*============================================
<!-- start itjsgou WHY CHOOSE US area  -->
==============================================*/
.why-choose-us-area {
    background-color: #F5F9FF;
    padding: 100px 0 100px;
}

.row.choose-box {
    margin-top: 33px;
}

.choose-box-icon {
    display: inline-block;
}

.choose-box-icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: #0C5ADB;
    border-radius: 100%;
    text-align: center;
}

.choose-box-icon i {
    color: #fff;
    font-size: 15px;
}

.choose-box-text p {
    margin-bottom: 12px;
}

.choose-box-text {
    display: inline-block;
    padding-left: 5px;
}

.why-choose-us-thumb {
    animation: up-down 3s linear infinite;
    margin-right: 100px;
}

.why-choose-us-thumb img {
    width: 100%;
}

.choose-button {
    margin-top: 30px;
}

.choose-button a {
    display: inline-block;
    background-color: #0C5ADA;
    font-size: 15px;
    border-radius: 3px;
    font-weight: 600;
    color: #fff;
    transition: all .3s;
    padding: 14px 35px 13px 35px;
    position: relative;
    z-index: 1;
}

.choose-button a::before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.choose-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.choose-button a:hover::before {
    width: 100%;
    z-index: -1;
}

.choose-button a i {
    margin-left: 6px;
}

/*============================================
<!-- Start itjsgou portfolio area-->
==============================================*/
.portfolio-area {
    padding: 100px 0 100px;
}

.tab_content {
    display: none;
    -webkit-animation: fadeInUp 1s ease-in ;
    animation: fadeInUp 1s ease-in ;
}

.tab_content.active {
    display: block;
}

.case_study_nav {
    margin: 0 0 40px;
}

.case_study_menu ul {
    text-align: center;
}

.case_study_menu ul li {
    background: transparent;
    border: medium none;
    font-size: 16px;
    line-height: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    text-transform: capitalize;
    padding: 12px 22px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin: 0 3px;
    margin-bottom: 7px;
    display: inline-block;
    background: #f2f4ff;
    border-radius: 5px;
}

.case_study_menu ul li:hover {
    color: #fff;
}

.case_study_menu ul li::before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #000;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.case_study_menu ul li:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.case_study_menu ul li:hover::before {
    width: 100%;
    z-index: -1;
}

li.current_menu_item {
    color: #fff !important;
    background: #0c5adb!important;
}

.case-study-thumb {
    position: relative;
    overflow: hidden;
}

.case-study-thumb::before{
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 0;
    width: 100%;
    background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(60,52,173,0.2) 0%,rgba(17,113,215,1) 150%) repeat scroll 0 0;
    border-radius: 5px;
    transition: all .35s ease-in-out;
}

.case-study-single-box:hover .case-study-thumb::before{
    height: 100%;
}


.case-study-thumb img {
    width: 100%;
    border-radius: 5px;
}

.case-study-title h3 {
    margin: 8px 0 0px;
    text-transform: capitalize;
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.case-study-title h3 a {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

.case-study-single-box {
    margin-bottom: 30px;
}

.case-study-content-inner {
    position: absolute;
    transition: .5s;
    right: 20px;
    bottom: 80px;
    left: 20px;
    background: #0c5adb;
    width: 86%;
    margin: auto;
    text-align: left;
    padding: 30px 20px 30px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
}

.case-study-single-box:hover .case-study-content-inner{
    visibility: visible;
    opacity: 1;
} 

.category-item-p {
    color: #fff;
    line-height: 1.2;
    margin: 5px 0 0;
}

.venobox.pbox-item {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    text-align: center;
    color: #0C5ADB;
    border-radius: 100%;
    margin: 0 8px  0 0;
    transition: 0.5s;
}

.venobox.pbox-item:hover {
    background: #00247E;
    color: #fff;
}

.case-study-title {
    margin-top: 23px;
}

/*============================================
<!-- Start itjsgou Breadcumb Area -->
==============================================*/
.breadcumb-area {
    background: url(../image/Breadcumb-2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 265px;
}

.breadcumb-content {
    text-align: center;
}

.breadcumb-title h2 {
    font-size: 40px;
    margin-bottom: 9px;
    margin-top: 0;
    color: #fff;
}

.breadcumb-content-menu ul li {
    list-style: none;
    display: inline-block;
}

.breadcumb-content-menu a {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.breadcumb-content-menu span {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.breadcumb-content-menu i {
    display: inline-block;
    font-size: 14px;
    line-height: 26px;
    color: #ffffff;
    margin: 0 8px;
}

/*============================================
<!--start itjsgou about-section -->
==============================================*/
.about-section {
    padding: 100px 0 100px;
    position: relative;
    overflow: hidden;
}

.about-section .itjsgou-section-title.text-left p {
    font-size: 18px;
    margin: 0;
    width: 90%;
}

.about-section-description p {
    font-size: 18px;
    width: 90%;
    padding-top: 7px;
}


.about-section-button a {
    display: inline-block;
    background-color: #0C5ADA;
    font-size: 15px;
    border-radius: 3px;
    font-weight: 600;
    color: #fff;
    transition: all .3s;
    padding: 14px 35px 13px 35px;
    position: relative;
    z-index: 1;
}

.about-section-button a::before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #232323;
    clip-path: polygon(-1% 0,0 0,-25% 104%,-1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .5s;
    width: 100%;
    border-radius: 5px;
    z-index: -1;
}

.about-section-button a:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0,101% 0,101% 101%,0 101%);
    
}

.about-section-button a:hover::before {
    width: 100%;
    z-index: -1;
}

.about-section-button a i {
    margin-left: 6px;
}

.about-inner-thumb img {
    width: 100%;
}

.about-shape {
    position: absolute;
    z-index: 1;
    bottom: 218px;
    right: 8px;
    animation: up-down 3s linear infinite;
}

/*brand-style-two*/

.brand-area-two {
    padding: 100px 0 105px;
    background-color: #F5F9FF;
}

/*============================================
<!-- Start itjsgou Pricing Area -->
==============================================*/
.pricing-area {
    padding: 100px 0  90px;
}

.single_pricing {
    transition: all 0.3s ease 0s;
    padding: 35px 40px 50px;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0px 3px 22px 0px rgb(44 130 237 / 15%);
    box-shadow: 0px 3px 22px 0px rgb(44 130 237 / 15%);

}

.single_pricing-two {
    transition: all 0.3s ease 0s;
    padding: 35px 40px 50px;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 20%);
    box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 25%);

}

/*all hover*/
.single_pricing:hover{
    -webkit-box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 20%);
    box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 20%);
}

.single_pricing:hover .featur {
    border:1px solid #0C5ADB;
    -webkit-box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 20%);
    box-shadow: 0px 10px 27px 0px rgb(44 130 237 / 25%);
}

.single_pricing:hover:hover .order_now a{
    background: #0C5ADB;
    color: #fff;
}

.pricing_title h3 {
    font-size: 22px;
    color: #0C5ADB;
    text-transform: capitalize;
    padding-bottom: 16px;
}

.price_item {
    -webkit-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-bottom: 17px;
    margin-top: 15px;
}

.price_item_inner {
    padding-bottom: 10px;
}

.price_item span {
    display: inline-block;
    -webkit-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    font-size: 29px;
    font-weight: 800;
    text-align: center;
    color: #0C5ADB;
}

.featur {
    border: 1px solid #e6e6e6;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    border-radius: 7px;
}

.featur ul {
    padding: 30px 0 36px;
}

.featur ul li {
    display: block;
    list-style: none;
    font-size: 17px;
    padding: 8px 0;
    text-transform: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-transform: capitalize;
}

.order_now {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-top: 41px;
}

.order_now a {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 35px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #616161;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

.featur-two {
    border: 1px solid #0C5ADB;
    transition: all 0.3s ease 0s;
    border-radius: 7px;
}

.featur-two ul {
    padding: 30px 0 36px;
}

.featur-two ul li {
    display: block;
    list-style: none;
    font-size: 17px;
    padding: 8px 0;
    text-transform: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-transform: capitalize;
}

.order_now-two {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-top: 41px;
}

.order_now-two a {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 35px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #616161;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #0C5ADB;
    color: #fff;
}

/*============================================
<!-- Start itjsgou services details Section  -->
==============================================*/
.service-details {
    padding: 100px 0 90px;
}

.services-datails-title h2 {
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

.service-details-text-1 p {
    margin: 21px 0 20px;
}

.service-details-sidebar {
    background: #F5F9FF;
    padding: 35px 36px 35px 36px;
}

.sidebar-title h4 {
    font-size: 24px;
    margin: 0 0 18px;
    font-weight: 700;
}

.service-list-box {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 21px 0 16px;
}

.service-list-box-one {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 0px 0 16px;
}

.service-list-box-two {
    display: flex;
    
    padding: 21px 0 0px;
}

.list-box-icon {
    
}

.service-list-text {
    padding-left: 12px;
}

.list-box-icon {
    border-radius: 100%;
    transition: all 500ms ease;
    height: 27px;
    width: 27px;
    line-height: 27px;
    text-align: center;
    border: 1px solid#0c5adb;
}

.list-box-icon i {
    display: inline-block;
    font-size: 16px;
    color: #0c5adb;
    font-weight: 900;
}

.service-list-text p {
    font-size: 16px;
    color: #232323;
    margin: 0;
    font-weight: 700;
    transition: 0.5s;
}

.service-list-text p:hover {
    color: #0c5adb;
}

.service-details-thumb img {
    width: 100%;
    border-radius: 5px;
}

.row.details-thumb {
    margin-top: 30px;
}

/*owl-nav*/

.service-details .owl-prev {
    display: inline-block;
}

.service-details .owl-nav {
    position: relative;
    bottom: 226px;
    
}

.service-details .owl-next {
    display: inline-block;
    float: right;
}

.service-details .owl-next i {
    color: #fff;
    font-size: 24px;
}

.service-details .owl-prev i {
    color: #fff;
    font-size: 24px;
}

/*owl-dot*/
.service-details .owl-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    border-radius: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.service-details .owl-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #000;
    opacity: .2;
}

.service-details .owl-dot.active  {
    opacity: 1;
}

.service-details-thumb-title h2 {
    margin-top: 0;
    font-size: 32px;
    font-weight: 700;
}

.service-details-thumb-des p {
    margin: 27px 0 16px;
}

.single-service-details {
    padding: 33px 36px 5px;
    background: #fff;
    border-radius: 7px;
    transition: .5s;
    box-shadow: 2px 10px 50px rgba(158,158,158,.25);
    line-height: 50px;
    position: relative;
    z-index: 1;
}

.single-service-details::before {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 0;
    background: #0c5adb;
    border-radius: 5px;
    transition: all .35s ease-in-out;
}

/*all hover*/
.single-service-details:hover::before{
width: 100%;
}

.single-service-details:hover .service-details-icon i{
    color: #fff;
}

.single-service-details:hover .service-number span{
    color: #fff;
}

.single-service-details:hover .service-box-desc p {
    color: #fff;
}

.service-details-icon i {
    font-size: 48px;
    display: inline-block;
    color: #0c5adb;
    transition: .5s;
    margin-bottom: 41px;
}

.service-number span {
    color: #0c5adb;
    font-size: 85px;
    font-weight: 800;
    margin-right: 50px;
    display: block;
    padding-bottom: 14px;
}

.row.service-details-box {
    margin-top: 38px;
}

.service-box-desc p {
    transition: 0.5s;
}

.service-details-title h3 {
    font-size: 35px;
    margin: 53px 0 22px;
}

.service-details-desc p {
    margin-bottom: 36px;
}

/*============================================
<!-- start itjsgou Privacy Policy Area -->
==============================================*/
.privacy-policy-area {
    padding: 6px 0 20px;
}

.privacy-policy-title h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.privacy-policy-text p, .privacy-policy-text2 p {
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
}

/*============================================
<!-- start itjsgou contact Area -->
==============================================*/
.contact-area {
    padding: 90px 0 80px;
}

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

.single-contact-box {
    display: flex;
    align-items: center;
    margin-bottom: 44px;
}

.contact-box-icon {
    border-radius: 4px;
    background: #F5F9FF;
    transition: all 500ms ease;
    height: 73px;
    width: 73px;
    text-align: center;
    line-height: 73px;
    margin-right: 20px;
}

.contact-box-icon i {
    font-size: 34px;
    color: #0C5ADB;
    display: inline-block;
}

.contact-box-title h2 {
    font-size: 22px;
    margin: 0 0 6px 0;
}

.contact-box-description p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.contact-box-description span {
    display: block;
}

.form-box {
    margin-bottom: 25px;
}

.form-box input {
    width: 100%;
    height: 56px;
    background-color: #F5F9FF;
    border-color: transparent;
    transition: .5s;
    border: 1px solid #F5F9FF;
    padding: 6px 20px;
    box-shadow: none;
    border-radius: 5px;
}

.form-box textarea {
    width: 100%;
    height: 165px;
    border: 1px solid #F5F9FF;
    padding: 6px 20px;
    border-radius: 4px;
    background: #F5F9FF;
}

.submit-button button {
    width: 100%;
    background: #275efe;
    padding: 16px 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    outline: none;
    letter-spacing: 0.5px;
    border: none;
    text-align: center;
    display: inline-block;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.submit-button button::before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scale(0.0, 1);
    transition: .5s;
    border-radius: 5px;
}

.submit-button button:hover::before{
    transform: scale(1);
}

/*============================================
<!-- start itjsgou google Area -->
==============================================*/
.google-map-area {
    padding: 90px 0 0px;
}

.google-maps iframe {
    width: 100%;
    height: 260px;
}

/*============================================
<!-- start itjsgou-blog grid-area -->
==============================================*/
.itjsgou-blog-area {
    padding: 100px 0 100px;
    background: #F6F6F6;
}

/*============================================
<!-- start itjsgou blog list area -->
==============================================*/
.sidebar-search-box {
    margin-bottom: 40px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
}

.search-form {
    position: relative;
    width: 100%;
}

.search-form input {
    background: #fff none repeat scroll 0 0;
    height: 60px;
    position: relative;
    width: 100%;
    border: 1px solid #ced4da;
    color: #616161;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 8px;
    padding-left: 10px;
}

.search-form button {
    background: transparent none repeat scroll 0 0;
    color: #616161;
    font-size: 18px;
    padding: 1px 15px;
    top: 5px;
    right: 0;
    height: 53px;
    width: 53px;
    position: absolute;
    display: inline-block;
    border: none;
    z-index: 1;
}

.widget-sidebar-box {
    margin-bottom: 40px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
}

.widget-recent-post {

    margin-bottom: 14px;
    padding-bottom: 14px;

}

.rpost-title h4 {
    margin-top: 0;
    margin-bottom: 2px;
    line-height: 16px;
}

.rpost-title h4 a {
    color: #232323;
    font-size: 18px;
    line-height: 22px;
    transition: all 0.3s ease 0s;
    font-weight: 700;
}

.rpost-title h4 a:hover{
    color: #0c5adb;
}

.rpost-thumb {
    margin-right: 27px;
    float:left;    width:30%;
}

.rpost-thumb img {
    border-radius: 15px;
    transform: scale(1);
    transition: 0.5s;
    width: 100%;
}

.rpost-thumb img:hover {
    transform: scale(1.2);
}

/*============================================
<!-- start itjsgou blog details area -->
==============================================*/
.blog-details-section {
    padding: 90px 0 100px;
    background: #F6F6F6;
}

.details-thumb img {
    width: 100%;
}

.itjsgou-blog-meta-left a, .itjsgou-blog-meta-left span {
    display: inline-block;
    text-decoration: none;
    text-transform: capitalize;
    margin-right: 24px;
    color: #616161;
    position: relative;
    font-weight: 500;
    transition: 0.5s;
}

/*all hover*/
.itjsgou-blog-meta-left a:hover{
    color: #0c5adb;
} 

.itjsgou-blog-meta-left span:hover{
    color: #0c5adb;
}

.itjsgou-blog-meta-left p:hover{
    color: #0c5adb;
}

.itjsgou-blog-meta-left span::before{
    content: "";
    background: #616161;
    width: 1px;
    height: 14px;
    position: absolute;
    right: -15px;
    top: 5px;
}

.itjsgou-blog-meta-left a::before{
    content: "";
    background: #616161;
    width: 1px;
    height: 14px;
    position: absolute;
    right: -15px;
    top: 5px;
}

.itjsgou-blog-meta-left p {
    transition: .3s;
    display: inline-block;
    text-decoration: none;
    text-transform: capitalize;
    color: #616161;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.blog-details-content {
    padding: 38px 45px 45px;
    box-shadow: 0 3px 19px rgba(0,0,0,.08);
    border-radius: 0 0 10px 10px;
    background: #fff;
    margin-bottom: 40px;
}

.itjsgou-blog-meta-left {
    padding-bottom: 22px;
}

.blog-details-content-text p, .blog-details-content-text-inner p {
    margin-bottom: 21px;
}

.blog-details-content-text-inner2 p {
    margin: 16px 0 21px;
}

.blog-content-title h3 {
    font-size: 28px;
}

.single-blog-content ul {
    padding-left: 20px;
    padding-bottom: 10px;
    list-style: square;
}

.single-blog-thumb img {
    width: 100%;
}

.itjsgou-blog-social {
    padding-top: 40px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    margin-top: 40px;
}

.itjsgou-single-icon ul li {
    list-style: none;
    display: inline-block;
}

.itjsgou-single-icon ul li a {
    border: 1px solid #e6e6e6;
    color: #565872;
    display: inline-block;
    height: 40px;
    line-height: 41px;
    margin: 0 9px 0 0;
    text-align: center;
    width: 40px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

.itjsgou-single-icon ul li a::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #0056b3;
    border-radius: 4px;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.itjsgou-single-icon ul li a:hover::before{
    transform: scale(1);
}

.itjsgou-single-icon ul li a:hover{
    color:#fff;
} 

.itjsgou-single-icon ul li a i {
    font-size: 15px;
}

.contact_title {
    padding-top: 14px;
}

.contact_title h1 {
    font-size: 24px;
    margin-bottom: 30px;
    margin-top: 0;
    position: relative;
    display: inline-block;
}

.contact_title h1::before {
    position: absolute;
    left: 0;
    bottom: -11px;
    width: 88px;
    height: 3px;
    background: #aec6ef;
    content: "";
}

.contact_title h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -13px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #2871FE;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}

.form_box input {
    height: 56px;
    border-color: transparent;
    transition: .5s;
    border: 1px solid #F5F9FF;
    padding: 6px 20px;
    border-radius: 5px;
    display: block;
    width: 100%;
    font-size: 16px;
    color: #495057;
}

.blog-details-section textarea#message {
    height: 160px;
}

.contact_from .form_box textarea {
    border-color: transparent;
    transition: .5s;
    border: 1px solid #F5F9FF;
    padding: 6px 20px;
    box-shadow: none;
    border-radius: 5px;
}

.detalis-form button {
    width: 100%;
    background: #275efe;
    padding: 13px 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    outline: none;
    letter-spacing: 0.5px;
    border: none;
    text-align: center;
    display: inline-block;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.detalis-form button::before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scale(0.0, 1);
    transition: .5s;
    border-radius: 5px;
}

.detalis-form button:hover::before{
    transform: scale(1);
}

.detalis-form button i {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

/*<!--=========================================-->
<!--start itjsgou potfolio-details-section -->
<!--===========================================-->*/

section.potfolio-details-section {
    padding: 120px 0;
    background: #f8f8f8;
}

.portfolio-info {
    background: #fff;
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
    padding: 68px 60px;
}

.portfolio-info-title h1 {
    font-size: 35px;
    letter-spacing: 4px;
    line-height: 40px;
    color: #232323;
    font-weight: 400;
    margin: 0;
}

.portfolio-info-details {
    margin-top: 26px;
}

.portfolio-info-details h6 {
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 28px;
    color: #232323;
    font-weight: 400;
}

.portfolio-info-details span {
    font-weight: 300;
    font-size: 18px;
}

.portfolio-info-shere-title h5 {
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 60px;
    color: #232323;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
}

.portfolio-info-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.portfolio-info-share ul li {
    display: inline-block;
    margin: 0 4px;
}

.portfolio-info-share ul li a {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #00295A;
    display: inline-block;
    color: #FFF;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.portfolio-info-share ul li a:hover {
    color: #fff;
}

.portfolio-info-share ul li a::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c5adb;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
}

.portfolio-info-share ul li a:hover::before {
    transform: scale(1);
    filter: hue-rotate(360deg);
}

.portfolio-info-thumb {
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
}

.portfolio-info-thumb img {
    width: 100%;
}

.portfolio-strategy {
    margin: 60px 0 120px;
    padding: 50px 60px;
    background: #fff;
    filter: drop-shadow(0px 3px 30px rgba(189,189,189,0.26));
}

.portfolio-strategy-title h1 {
    font-size: 35px;
    letter-spacing: 4px;
    line-height: 40px;
    color: #232323;
    font-weight: 400;
    margin: 0 0 20px;
}

.portfolio-strategy-desc p {
    margin: 0;
}

.portfolio-related-title h1 {
    font-size: 35px;
    letter-spacing: 4px;
    line-height: 60px;
    color: #232323;
    font-weight: 400;
    margin-bottom: 8px;
}

.portfolio-related-btn a {
    font-size: 14px;
    letter-spacing: 1px;
    color: #232323;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    width: 110px;
    height: 45px;
    border-radius:4px;
    background-color: #e4e4e4;
    text-align: center;
    line-height: 45px;
    margin-top: 20px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.portfolio-related-btn a:hover {
    color: #fff;
}

.portfolio-related-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background:#0c5adb;
    border-radius:4px;
    transition: .5s;
    z-index: -1;
}

.portfolio-related-btn a:hover:before {
    width: 100%;
    filter: hue-rotate(360deg);
    left: 0;
}

.portfolio-related-thumb {
    position: relative;
    text-align: center;
}

.portfolio-related-thumb:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #232323;
    opacity: .7;
    transition: .5s;
}

.portfolio-related-thumb:hover:before {
    height: 100%;
    top: 0;
}

.portfolio-related-thumb img {
    width: 100%;
}

.related-thumb-content {
	position: absolute;
	bottom: -10%;
	left: 0;
	right: 0;
	visibility: hidden;
	opacity: 0;
    transition: .5s;
}

.portfolio-related-thumb:hover .related-thumb-content {
    bottom: 7%;
    visibility: visible;
    opacity: 1;
}

.related-thumb-content a {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
    padding: 10px 44px 10px 24px;
    background-color:#0c5adb;
    transition: .5s;
    position: relative;
}

.related-thumb-content a:hover {
    background-color: #00295A;
}

.related-thumb-content a i {
    transition: .5s;
    position: absolute;
    top: 11px;
    right: 20px;
}

.related-thumb-content a:hover i {
    right: 14px;
}

/*<!--=======================================-->
<!--End itjsgou potfolio-details-section -->
<!--=========================================-->*/



/*============================================
<-- itjsgou Loader Css -->
==============================================*/
.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    text-align: center;
    background: #fff;
    justify-content: center;
}

h4.sidebar-title.upp {
    color: #232323;
    display: block;
    font-size: 21px;
    margin-bottom: 40px;
    padding-bottom: 0;
    position: relative;
    text-transform: capitalize;
}

h4.sidebar-title.upp::before {
    position: absolute;
    left: 0;
    bottom: -11px;
    width: 88px;
    height: 3px;
    background: #aec6ef;
    content: "";
}

h4.sidebar-title.upp::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -13px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #2871FE;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}

@-webkit-keyframes MOVE-BG {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(88px);
              transform: translateX(88px);
    }
  }

  .sidebar-menu li {
    list-style: none;
}

.sidebar-menu li a {
    color: #616161;
    font-weight: 400;
}

.sidebar-menu li a {
    color: #616161;
    font-weight: 400;
}

.cate-item-one {
    border-top: 1px solid #E8E8E8;
    padding: 16px 0;
}

.cate-item {
    border-top: 1px solid #E8E8E8;
    padding: 16px 0;
}

.cate-item-two {
    border-top: 1px solid #E8E8E8;
    padding: 16px 0 16px;
}

.sidebar-title.upp h3 {
    color: #232323;
    display: block;
    font-size: 21px;
    margin-bottom: 10px;
    padding-bottom: 35px;
    text-transform: capitalize;
    border-bottom: 1px solid #1f1f1f21;
    position: relative;
}

.sidebar-title.upp h3::before {
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 88px;
    height: 3px;
    background: #aec6ef;
    content: "";
}

.sidebar-title.upp h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 22px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #2871FE;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}

.cloud-tag li {
    display: inline-block;
    margin: 10px;
}

.cloud-tag li a{
    padding: 10px 24px;
    border:1px solid#232323;
    border-radius: 4px;
    transition: .4s;
    font-weight: 400;
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #232323;
}

.cloud-tag li a::before{
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0%;
    height: 100%;
    background-color: #0c5adb;
    transition: .4s;
    z-index: -1;
    border-radius: 4px;
}

.cloud-tag li a:hover{
    color:#fff;
}

.cloud-tag li a:hover::before { 
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*
<!-- =============================== -->
<!--Scrollup Button Section -->
<!-- ================================ -->*/

/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(187, 247, 55, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #0c5adb;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #0c5adb;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #0c5adb;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}
.pt88{padding:0;}
.pt88 img{width:100%;}
.mt60{margin-top:60px}
.mb60{margin-bottom:60px}
.bglan{background-color:#0C5ADB}
.bgqianlan{background-color:#F5F9FF}
.theceo{font-size:0.8rem !important;color:#333;text-align:center !important}
.theceo:hover{color:#fff}
.service-box-desc p:hover{color:#fff}
.textblue{color:#0C5ADB;text-decoration: underline;font-size:0.75rem}
.ph10{font-size:14px !important;padding:20px 0 20px 0;text-align:initial !important;}
.ph101{font-size:14px !important;padding:20px 0 20px 0;text-align:initial !important;white-space: nowrap}
.fcolorwhite{text-align:center !important;color:#fff;text-align:center}
.fcolorblack{text-align:center !important;color:#333;text-align:center}