/*===============================================
Template Name: Workspace
Description: Description
Version: 1.0.0
Text Domain: Workspace
Tags:
================================================*/

/*TABLE OF Workspace*/
/*=======================
01. Workspace Header Menu Top Section Css
02. Workspace Header Menu Section Css
03. Workspace Xs-sidebar-group info-group Section Css
04. Workspace Hero Section Css
05. Workspace About Section Css
06. Workspace Service Section Css
07. Workspace Even Section Css
08. Workspace Main  Section Css
09. Workspace Vedio Section Css
10. Workspace Priching Section Css
11. Workspace Skill  Section Css
12. Workspace Private Office  Section Css
13. Workspace subscribe Section Css
14. Workspace Blog Section Css
15. Workspace Footer Section Css
16. Workspace Blog Section Css
17. Workspace Blog Two  Section Css
18. Workspace Blog Details  Section Css
19. Workspace Faq Section Css
20. Workspace Contact Section Css
21. Workspace Team Section Css
22. Workspace Protfolio  Section Css
23. Workspace Protfolio  Details Area Css
20. Workspace Service two Section Css
24. Workspace Service Details  Section Css
26. Workspace About  Two  Section Css
27. Workspace Scroll   Section Css
28. Workspace Brand   Section Css
29. Workspace Counter   Section Css
30. Workspace Search Popup Section Css
31. Workspace Loader Css
=======================*/

/*================================
 <-- Workspace Header Area Css-->
==================================*/
.header-top-menu {
    background: #074883;
}
.header-top-info ul li {
    list-style: none;
    display: inline-block;
}
.header-top-info ul li a {
    color: #fff;
    display: inline-block;
    padding: 9px 23px;
    border-right: 1px solid #ffffff82;
}
/*header-top menu right*/
.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 a {
    display: inline-block;
    padding: 8px 34px;
    color: #fff;
    border-left: 1px solid #ffffff82;
}

.header-top-right-social ul li a.style {
    border-right: 1px solid #ffffff82;
}


/*=====================================
<--  Dreamhub Workspace Header Area Css -->
=======================================*/
.logo {
    text-align: left;
}
/*sticky*/
.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: #2B6394!important;
    transition: .5s;
    z-index: 44;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
    position: absolute !important;
}
/*stiky header logo*/
 a.active-sticky {
    display: none;
}

.header-area.sticky a.active-sticky {
    display: block !important;
}
.header-area.sticky a.active {
    display: none !important;
}


/*stiky header button*/
.sticky .header-menu ul li a {
    color: #fff;
}
.sticky .header-menu ul li a i {
    color: #fff;
}
.sticky .nav-btn.navSidebar-button span i {
    color: #fff;
}
.sticky .header-search-button a i {
    color: #fff;
}

/*header-menu*/
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    list-style: none;
    position: relative;
    margin: 0 0 0 35px;
}

.header-menu ul li a {
    display: inline-block;
    padding: 34px 0;
    line-height: 28px;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
    color: #616161;
}

.header-menu ul li a i {
    font-size: 15px;
    margin-left: 6px;
    color: #616161;
}
/*header search button*/
.header-search-button {
    display: inline-block;
}
.header-search-button a i {
    margin-left: 22px;
    color: #232323;
    font-size: 20px;
}
.sidebar-btn {
    display: inline-block;
}
.nav-btn.navSidebar-button span i {
    font-size: 30px;
    display: inline-block;
    cursor: pointer;
    color: #232323;
    margin-left: 43px;
    position: relative;
    top: 5px;
}


/*sub-menu*/
.header-menu ul li .sub-menu {
    position: absolute;
    top: 95px;
    left: 0;
    background: #fff;
    width: 250px;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-top: 20px;
    border-top: 2px solid #2B6396;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 23px rgb(0 0 0 / 10%);
    border-bottom: 2px solid #2B6396;
    z-index: 1;
}
.header-menu ul li:hover .sub-menu{
    top: 78px;
    visibility: visible;
    opacity: 1;
}
.header-menu ul li .sub-menu li {
    display: block;
    margin-left: 0;
}
.header-menu ul li .sub-menu li a {
    display: inline-block;
    padding: 10px 25px;
    margin: 0;
    font-size: 16px;
    color: #39374d;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
}
.header-menu ul li .sub-menu li a:hover{
    background: #2B6396;
    color: #fff;
}



/*
<!-- ============================================================== -->
<!-- Start nav button-->
<!-- ============================================================== -->*/
.nav-btn.navSidebar-button {
    display: inline-block;
}
.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}
.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 0;
    right: 0;
    padding: 25px;
}
.xs-sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(7,72,131,0.8);
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}
.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.4;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}
.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}
.sidebar-textwidget {
    padding: 35px;
}
.close-side-widget i {
    color: #fff;
    font-size: 24px;
    display: block;
}
.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.xs-sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}
.xs-bg-black {
    background-color: #245a8d;
}
.row.padding-two {
    padding: 35px 0 11px 15px;
}
.contact-info h2 {
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    padding-bottom: 5px;
}
ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    font-size: 15px;
}

ul.list-style-one li i {
    font-size: 20px;
    color: #fff;
    margin: 0  10px 0 0px;
}
ul.social-box {
    margin: 30px 0 0;
}
ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}
ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #074883;
    transition: .5s;
    font-size: 16px;
    font-weight: 400;
    border-radius: 3px;
    position: relative;
    border: 1px solid transparent;
    z-index: 1;
}
ul.social-box li a:hover {
    color: #fff;
    background: none;
    border: 1px solid #fff; 
}
.content-thumb-box {
    padding-bottom: 12px;
}
.content-thumb-box img {
    width: 92%;
}





/*================================
 <-- Workspace Hero  Area Css-->
==================================*/
.hero-area {
    background: url(../image/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 800px;
}
.hero-sub-title h5 {
    font-size: 16px;
    color: #074883;
    font-style: italic;
    background: #fff;
    display: inline-block;
    padding: 5px 25px;
    border-radius: 5px;
    margin-bottom: 12px;
}
.hero-main-title h1 {
    font-size: 70px;
    line-height: 82px;
    color: #ffffff;
    font-weight: 700;
}
.hero-description p {
    width: 50%;
    color: #ffffff;
    margin-top: 14px;
}

.hero-button {
    margin-top: 42px;
}

.hero-button a {
    font-size: 16px;
    color: #185185;
    display: inline-block;
    background: #fff;
    padding: 10px 30px;
    border: 1px solid #fff;
    margin-right: 26px;
    border-radius: 5px;
    transition: .5s;
}

.hero-button a:hover{
    background: none;
    color: #fff;
}

.hero-button a.active {
    background: none;
    color: #fff;
    transition: .5s;
}

.hero-button a.active:hover {
    background: #fff;
    color: #185185;
}

/*================================
 <-- Workspace  Section Title  Css-->
==================================*/
.main-section {
    background: #074883;
    padding: 120px 0 148px;
}
.section-title {
    margin-bottom: 50px;
}

.section-sub-title {
    margin-bottom: 10px;
}
.section-sub-title h4 {
    font-size: 16px;
    color: #074883;
    font-style: italic;
    background: #BFCFDF;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 12px;
}

.section-main-title {
    margin-bottom: 14px;
}

.section-main-title h1 {
    font-size: 40px;
    color: #232323;
    font-weight: 700;
}
.main-section  .section-main-title h1 {
    color: #fff;
}
.main-section .section-sub-title h4 {
    color: #fff;
    background: #ffffff54;
}

/*================================
 <-- Workspace  About Area   Css-->
==================================*/
.about-area {
    padding: 120px 0120px;
}
.about-area .section-title {
    margin-bottom: 27px;
}
.about-left {
    position: relative;
    margin-left: -33%;
}

.about-shape {
    position: absolute;
    bottom: 22%;
    left: 29%;
}

.about-single-box {
    margin-bottom: 14px;
}

.about-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #074883;
    text-align: center;
    line-height: 37px;
    float: left;
    margin-right: 20px;
}

.about-content {
    overflow: hidden;
    margin: 0 195px 0 0;
} 

.about-title h3 {
    font-size: 18px;
    color: #232323;
    font-weight: 700;
    margin-bottom: 8px;
}

.about-button a {
    display: inline-block;
    background: #074883;
    padding: 11px 24px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #074883;
    margin-top: 3px;
    transition: .5s;
}

.about-button a:hover {
    color: #074883;
    background: none;
    border: 1px solid #074883;
}

/*================================
 <-- Workspace  service  Section Css-->
==================================*/
.service-section {
    padding: 120px 0 120px;
    background: #eff8f8;
}
.service-section .section-description p {
    margin: auto;
    width: 50%;
}
.service-single-box {
    text-align: center;
    position: relative;
    padding: 50px 40px 43px;
    z-index: 1;
    background: #fff;
    transition: .5s;
}
.service-single-box:hover {
    transform: translateY(-10px);

}
.service-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: #eff8f8;
    line-height: 70px;
    display: inline-block;
    margin-bottom: 23px;
    transition: .5s;
}
.service-title h3 {
    font-size: 22px;
    color: #232323;
    font-weight: 600;
    margin-bottom: 18px;
}

.service-button a {
    color: #232323;
    display: inline-block;
    margin-top: 8px;
}
.service-shape {
    position: absolute;
    left: 0;
    top: 42px;
    right: 0;
    margin: auto;
    z-index: -1;
}
/*animation*/
.dance2 {
    -webkit-animation: dance 3s alternate infinite;
    animation: dance 3s alternate infinite;
}
@keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
/*all hover*/
.service-single-box:hover .service-button a{
    color: #074883;
}
.service-single-box:hover .service-icon{
    background: #074883;
}

/*================================
 <-- Workspace  Blog  Section Css-->
==================================*/
.even-section {
    padding: 120px 0 120px;
}

/*blog single box*/
.even-single-box {
    box-shadow: 0 0 14.5px rgba(0,0,0,0.09);
}
.even-thumb {
    position: relative;
}
.even-thumb img {
    width: 100%;
}

.even-thumb {
    position: relative;
    overflow: hidden;
}
.even-thumb:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    content: "";
    -webkit-transition: all .6s;
    transition: all .6s;
    z-index: 2;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
}

.even-single-box:hover .even-thumb::before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
}
.even-thumb img {
    width: 100%;
    transition: .5s;
    transform: scale(1.1);

}
.even-single-box:hover .even-thumb img {
    transform: scale(1.2);
}




.even-content {
    padding: 32px 30px 15px;
}
.even-title h3 a {
    font-size: 22px;
    color: #232323;
    font-weight: 700;
    margin: 12px 0 18px;
    display: inline-block;
    transition: .5s;
}
.even-title h3 a:hover {
    color: #074883;
}

.even-date span {
    font-size: 14px;
    color: #ffffff;
    position: absolute;
    bottom: 0;
    background: #074883;
    padding: 0 20px;
    display: inline-block;
    border-radius: 4px;
}



/*================================
 <-- Workspace  Video  Section Css-->
==================================*/
.row.vedio_bg {
    text-align: center;
    position: relative;
    margin-top: -147px;
}

.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}
.video-icon a i {
    line-height: 74px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #074883;
    text-align: center;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
    width: 74px;
    height: 74px;
    background-color: #ffffff;
}
@-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)
    }
}


/*================================
 <-- Workspace  Priching  Section Css-->
==================================*/
.priching-section {
    padding: 120px 0 120px;
}
.priching-single-box {
    text-align: center;
    box-shadow: 0 0 14.5px rgba(0,0,0,0.09);
    padding: 0 0 40px;
    transition: .5s;
}
.priching-thumb {
    position: relative;
}
.priching-thumb img {
    width: 100%;
}
/*priching-table */
.priching-table {
    position: absolute;
    left: 0;
    right: 0;
    top: 54px;
    text-align: center;
    margin: auto;
    transition: .5s;
}

.priching-table h3.priching-table-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.priching-table p {
    color: #fff;
}
/*priching table doler*/
.priching-table-dolar {
    margin: 43px 0 20px;
}

.priching-table-dolar h1 {
    font-size: 36px;
    line-height: 28px;
    color: #232323;
    font-weight: 700;
}

.priching-table-dolar span.doler-style {
    font-size: 16px;
    font-weight: 400;
    color: #616161;
}

.priching-table-dolar span {
    font-size: 16px;
    font-weight: 400;
}
/*priching table body*/
.priching-table-body {
    position: relative;
}
.priching-table-body:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -34px;
    right: 0;
    margin: auto;
    height: 1px;
    width: 85%;
    background: #074883;
    opacity: 0.3;
}

.priching-table-body ul li {
    list-style: none;
    margin: 6px 0;
}

.priching-table-body ul li i {
    font-size: 16px;
    color: #074883;
    position: relative;
    margin-right: 12px;
    display: inline-block;
}
/*priching button*/
.priching-button {
    margin-top: 75px;
}

.priching-button a {
    display: inline-block;
    background: #074883;
    padding: 10px 21px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid transparent;
}

.priching-button a i {
    font-size: 11px;
    margin-left: 10px;
}

/*all hover*/
.priching-single-box:hover .priching-button a {
    border: 1px solid #074883;
    background: none;
    color: #074883;
}





/*================================
 <-- Workspace  Skill   Section Css-->
==================================*/
.skill-section {
    background: #eff8f8;
    padding: 120px 0 140px;
}
.skill-left {
    position: relative;
    left: -202px;
}
.skill-thumb-shape {
    position: absolute;
    right: -20%;
    bottom: -19px;
}
/*animation*/
.top-img-up-down2{
	-webkit-animation: top-image-bounce 2s infinite ease-in-out;
     animation: top-image-bounce 2s infinite ease-in-out;
}
@-webkit-keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
  }

  50% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes left-image-bounce {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}

@keyframes left-image-bounce {
  0% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
}

.skill-right .section-title {
    margin-bottom: 0;
}
/*prossess ber*/
.prossess-ber-plugin span {
    font-size: 18px;
    color: #232323;
    font-weight: 500;
}

.barfiller {
    width: 100%;
    height: 5px;
    background: rgba(7,72,131,0.4);
    position: relative;
    margin-bottom: 32px;
    margin-top: 11px;
    border-radius: 5px;
}
span.fill {
    background: #074883 !important;
    border-radius: 5px;
}
.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}
.barfiller .tipWrap { display: none; }

.barfiller .tip {
    margin-top: -43px;
    padding: 2px 4px;
    left: 0px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #232323;
}

/*================================
 <-- Workspace  About section style Two Css-->
==================================*/
.private-office-section{
    padding: 120px 0 120px;
}
.private-office-right {
    position: relative;
    margin-left: 46px;
}
.private-office-left .section-description p {
    width: 93%;
}
.private-office-single-box {
    margin-bottom: 14px;
}
.private-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #074883;
    text-align: center;
    line-height: 30px;
    float: left;
    margin-right: 20px;
    margin-top: 2px;
}
.private-icon span i {
    color: #fff;
}
.private-content {
    overflow: hidden;
    margin: 0 195px 0 0;
}
.private-title h3 {
    font-size: 18px;
    color: #232323;
    font-weight: 700;
    margin-bottom: 8px;
}



/*================================
 <-- Workspace  Subscribe Section Css-->
==================================*/
.subscribe-section {
    background: url(../image/subscribe.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 600px;
    background-attachment: fixed;
}
.subscribe-section .section-main-title h1 {
    color: #fff;
}
.subscribe-section .section-description p{
    color: #fff;
}
.subscribe-section .form-box {
    text-align: center;
}

.subscribe-section .form-box input {
    width: 43%;
    height: 60px;
    border-radius: 5px;
    background-color: #ffffff;
    border: none;
    outline: 0;
    padding: 0px 197px 0 25px;
}

.subscribe-section .form-box button {
    margin-top: 5px;
    background: #074883;
    color: #ffff;
    border: none;
    margin-left: -180px;
    position: absolute;
    padding: 10px 22px;
    border-radius: 5px;
}
.subscribe-section .form-box button i {
    font-size: 11px;
    margin-left: 8px;
}


/*================================
 <-- Workspace  blog  Section Css-->
==================================*/
.blog-section {
    padding: 120px 0 120px;
}
.blog-grid-area {
    padding: 120px 0 90px;
}
.blog-section.style .bolg-single-box {
    margin-bottom: 30px;
}

.bolg-single-box {
    box-shadow: 0 0 14.5px rgba(0,0,0,0.09);
}
.blog-thumb {
    position: relative;
    overflow: hidden;
}
.blog-thumb:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    content: "";
    -webkit-transition: all .6s;
    transition: all .6s;
    z-index: 2;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
}

.bolg-single-box:hover .blog-thumb::before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
}
.blog-thumb img {
    width: 100%;
    transition: .5s;
    transform: scale(1.1);

}
.bolg-single-box:hover .blog-thumb img {
    transform: scale(1.2);
}
.blog-content {
    padding: 20px 30px 33px;
}
.blog-section span.blog-style {
    display: inline-block;
    background: #BFCFDF;
    color: #074883;
    padding: 1px 17px;
    border-radius: 5px;
    margin-bottom: 13px;
}
.blog-section span.meta-blog-date {
    margin-right: 15px;
}
.blog-section .meta-blog span i {
    font-size: 16px;
    color: #074883;
    margin-right: 10px;
}
.blog-title h3 a {
    font-size: 22px;
    color: #232323;
    font-weight: 700;
    margin: 10px 0 22px;
    display: inline-block;
    transition: .5s;
}
.bolg-single-box:hover .blog-title h3 a {
    color: #074883;
}





/*================================
 <-- Workspace  footer  Area Css-->
==================================*/
.footer-area {
    background: #011a32;
    padding: 117px 0 10px;
}

.footer-logo {
    margin-top: -5px;
}
.footer-widget-description p {
    color: #fff;
    margin-top: 44px;
}

.company-widget-address p {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    margin: 0;
}
.company-widget-address span {
    color: #fff;
    margin-top: 5px;
}
/*footer-widget-title*/
.footer-widget-title h2 {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 48px;
}

/*company widget info*/
.company-widget-info ul li {
    list-style: none;
}
.company-widget-info ul li a {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 16px;
    color: #ffffff;
    position: relative;
    padding-left: 24px;
}
.company-widget-info ul li a:after {
    left: 0;
    top: 8px;
    position: absolute;
    content: "";
    background: #fff;
    height: 5px;
    width: 5px;
}

/*recent-post-item*/
.footer-widget-item {
	margin-bottom: 10px;
}
.footer-widget-item.active {
    border-bottom: 1px solid #A3A3A3;
    padding-bottom: 10px;
    padding-top: 7px;
}
.recent-tost-img {
    float: left;
    margin-right: 20px;
}
.recent-tost-text a {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
}
.recent-tost-text p {
    font-size: 14px;
    margin: 0;
    color: #fff;
}
.rcomment {
	margin-top: -5px;
}

/*footer bottom*/
.row.footer_btm_bg {
    margin-top: 57px;
    position: relative;
}
.row.footer_btm_bg:before {
    opacity: 0.200;
    position: absolute;
    content: "";
    left: 12px;
    width: 98%;
    height: 1px;
    background: #ffffffab;
    top: -29px;
}
.footer-bottom-content p {
    color: #fff;
}

.footter-bottm-right {
    text-align: right;
}
.footter-bottm-right a {
	display: inline-block;
	color: #ffffff;
	position: relative;
	padding: 0 25px;
}

.footter-bottm-right a::before {
	position: absolute;
	content: "";
	right: -5px;
	top: 11px;
	background: #fff;
	height: 7px;
	width: 7px;
	border-radius: 50%;
}
.footter-bottm-right a:before:last-child{
    display: none;
}





/*
<!-- ============================================================== -->
<!--  Workspace  breadcumb-area -->
<!-- ============================================================== -->*/
.breadcumb-area {
    background: url(../image/bridcumb.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 550px;
    position: relative;
}
.breadcumb-area:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #074883;
    opacity: 0.6;
}
.breacumb-content {
    position: relative;
}
.breadcumb-title h1 {
    font-size: 70px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
}
.breadcumb-content-text a {
    color: #fff;
    font-weight: 500;
    transition: .5s;
    font-size: 18px;
}
.breadcumb-content-text i {
    color: #fff;
    font-size: 18px;
    margin: 0 10px 0;
}
.breadcumb-content-text span {
    font-weight: 500;
    color: #fff;
    font-size: 18px;
}


/*================================
 <--Start Workspace Service Section Style Two   Css-->
=================================*/
.service-section.style-two {
    background: #fff;
}
.service-section.style-two .service-single-box {
    background: none;
    padding: 0;
    box-shadow: 0 0 14.5px rgba(0,0,0,0.03);
    position: relative;
}
.service-thumb img {
    width: 100%;
}
.service-section.style-two .service-single-box span.style {
    position: absolute;
    top: 0;
    left: 0;
    background: #074883;
    padding: 0 28px;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
}

.service-section.style-two .service-content {
    background: #fff;
    text-align: left;
    padding: 20px 30px 40px;
    border-radius: 0 0 5px 5px;
}
span.service-date {
    color: #074883;
    font-size: 14px;
    font-weight: 600;
}
.service-section.style-two .Service-title h3 {
    margin: 10px 0 12px;
    font-size: 22px;
    color: #232323;
    font-weight: 700;
}
.service-section.style-two .service-button a {
    display: inline-block;
    background: #074883;
    padding: 9px 20px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid transparent;
    margin-top: 15px;
}

.service-section.style-two .service-single-box:hover .service-button a {
    background: none;
    border: 1px solid #074883;
    color: #074883;
}

.service-button a i {
    font-size: 11px;
    margin-left: 10px;
}

/*================================
 <--Start Workspace Brand  Section   Css-->
=================================*/
.brand-section {
    background: #064683;
    padding: 31px 0 30px;
}


/*================================
 <--Start Workspace About   Section  Style Two  Css-->
=================================*/
.about-area.style-two .about-left {
    position: relative;
    margin-left: -19%;
}
.about-area.style-two  .about-shape {
    bottom: 3%;
    left: 22%;
}
.about-video-button {
    position: absolute;
    top: 16%;
    right: 27%;
}

.about-video-button a {
    background: #074783;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    display: inline-block;
    position: relative;
}
.about-video-button a:after {
    content: "";
    border: 2px solid #ffbb00;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.about-video-button a:before {
    content: "";
    border: 2px solid #ffbb00;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
}

@keyframes zoomBig {
    0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
    }
    40% {
    opacity: .5;
    border-width: 2px;
    }
    65% {
    border-width: 1px;
    }
    100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 1px;
    }
    }
    @keyframes zoomBig {
    0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
    }
    40% {
    opacity: .5;
    border-width: 2px;
    }
    65% {
    border-width: 1px;
    }
    100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 1px;
    }
    }
span.about-two-icon i {
    color: #074783;
    font-size: 22px;
    margin-right: 10px;
}
.about-area.style-two .about-title h3 {
    margin-bottom: 15px;
}


/*================================
 <--Start Workspace Team Section   Css-->
=================================*/
.team-section {
    padding: 120px 0 120px;
}
.team-section.tow {
    padding: 120px 0 90px;
}
.team-section.tow .team-single-box {
    margin-bottom: 30px;
}
.team-single-box {
    position: relative;
    
}
.team-thumb {
    position: relative;
    overflow: hidden;

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

.team-content {
    position: absolute;
    text-align: center;
    background: rgba(7,72,131,0.8);
    clip-path: polygon(0% 25%, 100% 0, 100% 100%, 0% 100%);
    width: 100%;
    height: 29%;
    bottom: -60px;
    transition: .5s;
    opacity: 0;
}
.team-name {
    margin-top: 32px;
}
.team-name h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 3px;
}
.team-name span {
    color: #fff;
}
.team-social-info {
    background: #fff;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 5px;
    position: absolute;
    bottom: -9%;
    left: 32%;
    box-shadow: 0 0 14.5px rgba(0,0,0,0.08);
    opacity: 0;
    transition: .5s;
}
.team-social-info ul li {
    list-style: none;
    display: inline-block;
}
.team-social-info ul li a {
    display: inline-block;
    color: #074883;
    padding-right: 15px;
}
/*all hover*/
.team-single-box:hover .team-content {
    opacity: 1;
    bottom: 0;
}
.team-single-box:hover .team-social-info {
    bottom: -4%;
    opacity: 1;
}
/*================================
 <--Start Workspace Counter Sention   Css-->
=================================*/
.counter-section {
    padding: 120px 0 120px;
}
.counter-songle-box {
    box-shadow: 0 0 9px rgba(2,2,2,0.15);
    text-align: center;
    padding: 35px 0 32px;
}

.counter-icon {
    height: 80px;
    width: 80px;
    display: inline-block;
    border: 2px solid #074883;
    border-radius: 50%;
    line-height: 80px;
    margin-bottom: 22px;
    transition: .5s;
}
.counter-songle-box:hover .counter-icon {
    background: #074883;
}
.counter-icon img {
    filter: brightness(1)invert(0);
    transition: .5s;
}
.counter-songle-box:hover .counter-icon img {
    filter: brightness(0)invert(1);
}

.counter-number-content h1 {
    display: inline-block;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 5px;
}


/*================================
 <--Start Workspace Contact Area   Css-->
=================================*/
.contact-area {
    padding: 110px 0 26px;
}
.contact-area  .section-title {
    margin-bottom: 26px;
}

.row.contact_bg {
    position: relative;
    margin-bottom: 136px;
}

/*contact-single-box*/

.contact-icon {
    float: left;
    margin-top: -5px;
}
.contact-icon i {
    color: #074883;
    font-size: 25px;
    margin-right: 20px;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #074883;
}
.contact-single-box:hover .contact-icon i {
    background: #074883;
    color: #fff;
}
.contact-text {
    text-align: left;
    overflow: hidden;
}
.contact-text h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 7px;
}
.contact-text p {
    margin-bottom: 0;
}

/*canatc thumb left*/
.contact-thumb-left {
    position: relative;
    margin-left: 194px;
}
.conatct-thumb {
    position: relative;
}
.contact-shape {
    position: absolute;
    top: -3%;
    right: 7%;
}
.contact-shape2 {
    position: absolute;
    top: -5%;
    left: -6%;
    z-index: -1;
}
.dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
.contact-shape3 {
    position: absolute;
    left: -22%;
    bottom: -19%;
    z-index: -1;
}
/*contact box*/
.form_box input {
    border: 1px solid rgba(100,100,100,0.2);
    width: 100%;
    height: 53px;
    padding: 0 18px;
    margin-bottom: 20px;
    outline: 0;
    border-radius: 5px;
}

.form_box textarea {
    width: 100%;
    height: 120px;
    padding: 14px 18px;
    border: 1px solid rgba(100,100,100,0.2);
    outline: 0;
    border-radius: 5px;
}

.contact-form-button button {
    background: #074883;
    color: #fff;
    border: 1px solid #074883;
    padding: 12px 33px;
    margin-top: 35px;
    position: relative;
    z-index: 1;
    transition: .5s;
    border-radius: 5px;
}
.contact-form-button button:hover{
    background: none;
    border: 1px solid #074783;
    color: #074783;
}


/*================================
 <--Start Workspace Google Section   Css-->
=================================*/
.mapouter.fixed-height {
    height: 600px;
}

.gmap_canvas {
    width: 100%;
    height: 100%;
}

.mapouter iframe {
    width: 100%;
    height: 100%;
}

/*================================
 <--Start Workspace Service  Details Area   Css-->
=================================*/
.service-detials-area {
    padding: 120px 0 90px;
}
/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: rgba(7,72,131,0.7);
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

.service-detials-area .widget_search {
    background: rgba(7,72,131,0.8);
    box-shadow: none;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #232323;
    border: 0;
    outline: 0;
    background: #fff;
}

.widget_search input::placeholder{
    color: #232323;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #074883;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.service-detials-area .widget-categories-box {
    background: rgba(7,72,131,0.8);
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: none;
}

.widget-categories-box {
    background: rgba(7,72,131,0.7);
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

/*title*/

.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid rgb(255 255 255 / 44%);
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
    color: #fff;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #074883;
}
/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: #fff;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
}

.widget-categories-menu ul li:hover {
    border: 2px solid #074883;
}

.widget-categories-menu ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #074883;
    transition: .5s;
    z-index: -1;
}

.widget-categories-menu ul li:hover:before{
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    color: #074883;
    transition: .5s;
}
.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: #074883;
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fff;
    color: #0E1317;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.pdf-button a {
    display: block;
    background: #074883;
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
}

.sidber-widget-recent-post .recent-widget-content {
    padding-top: 20px;
}
.recent-widget-content a {
    color: #074883 !important;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    display: block;
    line-height: 26px;
    transition: .5s;
    margin-bottom: 7px;
}
.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #074883;
    font-size: 18px;
}
.sidber-widget-recent-post .recent-widget-content span {
    color: #074883;
}
.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #033461;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
    color: #fff;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover{
    color: #074883;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 2px solid #fff;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: #074783;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #074883;
}

.widget-tags a:hover:before{
    width: 102%;
}

/* Service Details Content CSS */

.service-details-main-title {
    padding: 20px 0 18px;
}

.service-details-main-title h1 {
    font-size: 50px;
    font-weight: 600;
}

.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}
.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}
.video-icon a i {
    height: 80px;
    line-height: 80px;
    width: 80px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #074883;
    text-align: center;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-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)
    }
}



.service-details-overview-title {
    padding: 22px 0 15px;
}

.service-details-overview-title h2 {
    font-size: 30px;
}

.service-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.service-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #074883;
    border-radius: 50%;
}

.service-details-choose-us {
    padding-bottom: 10px;
}

.service-details-choose-us-title {
    padding: 5px 0 15px;
}

.service-details-choose-us-title h2 {
    font-size: 30px;
}

.service-details-box {
    background: rgba(7,72,131,0.8);
    padding: 30px 30px 10px;
    margin-bottom: 30px;
    position: relative;
}
.service-details-number {
    position: absolute;
    right: 60px;
}

.service-details-number h2 {
    -webkit-text-stroke-width: 1px;
    color: transparent;
    -webkit-text-stroke-color: rgba(255,255,255,0.2);
    font-size: 48px;
    font-weight: 600;
    font-family: "Rubik";
}

.service-details-icon i {
    font-size: 50px;
    color: #fff;
}

.service-details-content h2 {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #fff;
}

.service-details-box .service-details-content p {
    color: #fff;
}

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

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





/*================================
 <-- Workspace  Protfolio   Section Css-->
==================================*/
.protfolio-section {
    padding: 120px 0 90px;
}

.protfolio-section .section-main-title {
    margin-bottom: -24px;
}
/* Portfolio Nav */
.portfolio_nav {
    margin-bottom: 40px;
}
.portfolio_nav {
    margin-bottom: 48px;
}
.portfolio_menu ul {
    text-align: center;
    list-style: none;
}

.portfolio_nav ul li {
    transition: all 0.5s ease 0s;
    cursor: pointer;
    margin: 6px 25px;
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.portfolio_nav ul li:hover{
    color: #074883;
}
.portfolio_nav ul li:before {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -9px;
    height: 2px;
    background: #074883;
    transition: .5s;
    width: 0%;
}
.portfolio_nav ul li:hover:before {
    width: 100%;
    left: 0%;
}

/*case study thumb*/
.case-study-single-box {
    margin-bottom: 30px;
    position: relative;
}

.case-study-thumb {
    overflow: hidden;
}
.case-study-thumb img {
    width: 100%;
    transition: .5s;
    transform: scale(1.1);
}
.case-study-single-box:hover .case-study-thumb img {
    transform: scale(1.2);
}

/*================================
 <-- Workspace  Protfolio Details  Area Css-->
==================================*/
.portfolio-detials-area {
    padding: 110px 0 100px;
}
.portfolio-details-main-title {
    padding: 0 0 18px;
}

.portfolio-details-text {
    padding-bottom: 1px;
}

.portfolio-details-overview-title {
    padding: 22px 0 15px;
}

.portfolio-details-overview-title h2 {
    font-size: 30px;
    font-weight: 600;
}

.portfolio-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.portfolio-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #074883;
    border-radius: 50%;
}

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

.portfolio-details-thumb {
    margin-top: 20px;
}

.portfolio-details-clients-title {
    padding-bottom: 10px;
}

.portfolio-details-clients-title h2 {
    font-size: 30px;
    font-weight: 800;
}

/*================================
 <-- Workspace  Blgo Details  Area Css-->
==================================*/
.blog-detials-area {
    padding: 120px 0 120px;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}
.blog-details-meta {
    background: #074883;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
    color: #fff;
}

.blog-details-meta span i {
    color: #fff;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

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

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: rgba(7,72,131,0.8);
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #fff;
}
.blog-details-video-thumb {
    margin-top: 30px;
    position: relative;
}

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

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

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
    color: #074783;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #074783;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: #074883;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    background: transparent;
    transition: .5s;
    margin-left: 10px;
    color: #074783;
}
.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: #074783;
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #074783;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #074783;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
    color: #074783;
}

.blog-details-social a:hover{
    background: #074783;
    border-color: #074783;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid rgba(255,255,255,0.2);
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #074883;
    padding: 30px 30px 70px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #ffff;
}
.blog-details-author-content p {
    color: #ffffffbd;
}

/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
    position: relative;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: #074783;
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid rgba(255,255,255,0.2);
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid rgba(255,255,255,0.2);
    margin: 12px 10px 10px;
    padding-top: 8px;
}
/*input-box*/
.input-box input {
    width: 100%;
    height: 50px;
    border: 1px solid #0202021a;
    margin-bottom: 30px;
    padding: 0 20px;
    outline: 0;
    border-radius: 3px;
}

.input-box textarea {
    width: 100%;
    height: 207px;
    outline: 0;
    border: 1px solid  #0202021a;
    padding: 22px 20px 0;
    border-radius: 3px;
}

/*input button*/
.input-button {
    margin-top: 27px;
}
.input-button button {
    display: inline-block;
    padding: 13px 39px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
    background: #074883;
    border: 1px solid #074883;
    transition: .5s;
}
.input-button button:hover {
    border: 1px solid #074883;
    color: #074883;
    background: none;
}
.input-button button i {
    margin-left: 10px;
}

/*================================
 <--  Workspace Faq Section Css-->
==================================*/
.faq-section {
    padding: 120px 0 120px;
}

/*accordion*/

.accordion li {
    list-style: none;
    padding: 5px 0 0;
    position: relative;
    z-index: 1;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: #074883 !important;
    z-index: 1;
}
.accordion li a.active span {
    color: #074883;
}
.faq-area .accordion li a.active {
    padding: 0;
    border-bottom: 1px solid rgba(7,72,131,0.8);
}
.accordion li p {
    display: none;
    font-size: 16px;
    padding: 25px 0 10px 30px;
    margin: 0;
}

.accordion a:before {
    width: 2px;
    height: 12px;
    background: #074883;
    position: absolute;
    right: 29px;
    content: " ";
    top: 16px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 12px;
    height: 2px;
    background: #074883;
    position: absolute;
    right: 24px;
    content: " ";
    top: 21px;
    transition: all 0.2s ease-in-out;
}
.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #074883;
}

.accordion a.active:before {
    display: none;
}

.accordion li a span.namber {
    font-size: 16px;
    line-height: 55px;
    color: #074883;
    position: relative;
    top: -5px;
    margin-right: 12px;
}

.accordion li a span {
    z-index: 1;
    font-size: 20px;
    color: #232323;
    font-weight: 400;
}

/* Faq New Style */
.faq-section .accordion li a {
    padding: 0 0px 0px;
    border-bottom: 1px solid rgba(7,72,131,0.8);
    display: inline-block;
}
.faq-section .accordion li a:hover{
    color: #00AFF5;
}

.faq-section .accordion li p {
    padding: 10px 56px 25px 25px;
    border-bottom: 1px solid rgba(7,72,131,0.8);
    font-size: 15px;
    line-height: 26px;
}




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

.scroll-area{
    position: relative;
    z-index: 999;
   }
  
  .scroll-area .go-top {
      position: fixed;
      cursor: pointer;
      top: 0;
      right: 30px;
      color: #ffffff;
      background-image: -moz-linear-gradient(0deg, #d1651a 0%, #573FEB 100%);
      background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #573FEB 100%);
      z-index: 9999;
      width: 45px;
      text-align: center;
      height: 45px;
      line-height: 42px;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.9s ease-out 0s;
      -moz-transition: all 0.9s ease-out 0s;
      border-radius: 10px; 
  }
  
  .scroll-area .go-top i {
        position: absolute;
        top: 50%;
        left: -4px;
        right: 0;
        margin: 0 auto;
        font-size: 15px;
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.5s ease-out 0s;
        -moz-transition: all 0.5s ease-out 0s;
    }
  
  .scroll-area .go-top i:last-child {
      opacity: 0;
      visibility: hidden;
      top: 60%; 
  }
  
  .scroll-area .go-top::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: linear-gradient(to right, #232353 0%, #232353 100%);
      background-image: -ms-linear-gradient(0deg, #232353 0%, #232353 100%);
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
      border-radius: 100%;
  }
  
  .scroll-area .go-top:focus, .scroll-area .go-top:hover {
        color: #fff; 
    }
  
  .scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
          opacity: 1;
          visibility: visible; 
  }
  
  .scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
          opacity: 0;
          top: 0;
          visibility: hidden;
   }
  
  .scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
          opacity: 1;
          visibility: visible;
          top: 50%; 
  }
  
  .scroll-area .go-top.active {
      top: 95%;
      -webkit-transform: translateY(-98%);
      -moz-transform: translateY(-98%);
      opacity: 1;
      visibility: visible;
      border-radius: 0;
      right: 30px;
      border-radius:100%;
  }
  
  .top-wrap {
    position: relative; 
  }
  
  .top-wrap .go-top-button {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      top: 3px;
      z-index: 1;
      background: #212529;
  }
  
   .top-wrap .go-top-button i {
        font-size: 20px;
        font-weight: 700;
        padding-left: 4px;
        color: #fff;
   }
  
  .top-wrap .go-top-button::after {
      z-index: -1;
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 45px;
      height: 45px;
      -webkit-animation: ripple 1.6s ease-out infinite;
      -moz-animation: ripple 1.6s ease-out infinite;
      opacity: 0;
      background-image: -moz-linear-gradient(0deg, #074783 0%, #3173b1 100%);
      background-image: -webkit-linear-gradient(0deg, #203c57 0%, #7db1e2 100%);
      border-radius: 100%;
  }
  
  .top-wrap .go-top-button:hover {
        background-color: #222;
        color: #fff; 
    }
  @keyframes ripple {
    0%, 35% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      opacity: 1; }
    50% {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0.8; }
    100% {
      opacity: 0;
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -ms-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2); } }
  
/*===========================
<-- Workspace Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #ee5417;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #074783;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}

/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(7,72,131,0.8);
    -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); 
    -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);
}
.search-popup{
    width: 100%;
}
.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #074783;
    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;
    height: 70px;
    line-height: 70px;
    text-align: center;
}
.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: rgba(7,72,131,0.8);
    -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: #074883;
    padding: 0;
    cursor: pointer;
    -webkit-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;
}

.flaticon-multiply:before {
    content: inherit;
}
button.close-search i {
    font-size: 40px;
    color: #fff;
    display: inline-block;
}
span.flaticon-multiply i {
    display: inline-block;
    color: #fff;
}

.header-search-btn {
    position: relative;
    display: inline-block;
}
.header-search-btn i {
    font-size: 16px;
    color: #fff;
    transition: .5s;
    margin-right: 0;
    position: relative;
    left: -24px;
}