/*===============================================
Template Name: Dreamhub-Email-Marketing HTML5 Template
Author:  https://templatemonster.net/user/DRTheme

Description: Description
Version: 1.0.0
Text Domain: dreamhub
Tags: consulting, finance, corporate, business, consultant, multipurpose, technology, it-solution, software, agency, company, portfolio, bangking, insurance, digital-agency, digital-marketing.
================================================*/

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


/*================================
<--  dreamhub Nav Menu Area Css -->
==================================*/

.dreamhub_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    background: #fff;
}

.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #060606!important;
    z-index: 9999 !important;
    animation-name: slideInDown;
}

/* dreamhub Menu Css*/

nav.dreamhub_menu {
    text-align: right;
}

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

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

.dreamhub_menu > ul > li > a {
    font-size: 17px;
    display: inline-block;
    margin: 35px 16px;
    -webkit-transition: .5s;
    color: #39364e;
    position: relative;
}

.dreamhub_menu > ul > li > a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #1e4799;
    transition: .5s;
}

nav.dreamhub_menu span {
    font-size: 13px;
    padding-left: 6px;
    font-family: FontAwesome;
    opacity: .5;
}

.dreamhub_menu > ul > li > a:hover {
    color: #1e4799;
}

/*menu button*/

.login-signe-button {
    display: inline-block;
}

button.login-btn {
    padding: 6px 28px;
    background: transparent;
    border: 0;
    color: #1e4799;
    font-family: 'Barlow';
    font-weight: 500;
    transition: .5s;
}

button.signup-signe-button {
    padding: 6px 28px;
    background: #1e4799;
    border: 0;
    color: #fefeff;
    font-family: 'Barlow';
    font-weight: 500;
}

button.login-btn:hover {
    background: #1e4799;
    color: #fff;
}

/* Center the image and position the close button */

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}



/* The Modal (background) */

.modal {
  display: none; 
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
  padding-top: 60px;
}

/* Modal Content/Box */

.modal-content {
    background-color: #fefefe;
    margin: 3% 15% 15% auto;
    border: 1px solid #888;
    width: 44%;
}

.login-form-box {
    padding: 0 20px 8px;
}

.login-form-box input {
    width: 100%;
    padding: 12px 20px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #1e4799;
    box-sizing: border-box;
    margin: 4px 0 4px;
}

.login-form-box button {
    background-color: #1e4799;
    color: white;
    padding: 14px 20px;
    margin: 20px 0 10px;
    border: none;
    cursor: pointer;
    width: 100%;
}

label.checkd input {
    width: inherit;
}

label {
    color: #060606;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
}

.login-box {
    padding: 20px 20px 16px;
}

.cancelbtn {
    width: auto;
    padding: 5px 15px;
    background-color: #f44336;
    border-radius: 3px;
    border: 0;
    color: #fff;
    font-size: 15px;
}

span.psw {
    float: right;
    padding-top: 16px;
    color: #060606;
}

span.psw a {
    color: #1e4799;
    transition: .5s;
}

span.psw a:hover {
    color: #f44336;
}

/* The Close Button (x) */

.close {
    position: absolute;
    right: 20px;
    top: 0;
    color: #000;
    font-size: 28px;
    font-weight: 500;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}


/* Add Zoom Animation */

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}


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

.dreamhub_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #1e4799;
    opacity: 0;
}
.dreamhub_menu ul li:hover>.sub-menu {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 100%;
     opacity: 1;
 }
.dreamhub_menu ul .sub-menu li {
     position: relative;
}
.dreamhub_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    text-transform: capitalize;
    -webkit-transition: .1s;
    visibility: inherit !important;
    color: #211e3b !important;
}
.dreamhub_menu ul .sub-menu li:hover>a,
.dreamhub_menu ul .sub-menu .sub-menu li:hover>a,
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
     background:#1e4799;
     color: #fff !important;
}

/* sub menu 2 */
.dreamhub_menu ul .sub-menu .sub-menu {
     left: 100%;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}
.dreamhub_menu ul .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 3 */
.dreamhub_menu ul .sub-menu .sub-menu li {
    position: relative;
}
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu {
     right: 100%;
     left: auto;
     top: 130%;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     visibility: hidden;
}
.dreamhub_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

/* sub menu 4 */
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu .sub-menu {
}
.dreamhub_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 0%;
}

.dreamhub_menu li a:hover:before{
    width:101%;
}
.dreamhub_nav_manu.sticky-nav .logo_img {
    display: none;
}
.main_sticky {
    display: none;
}
.dreamhub_nav_manu.sticky-nav .main_sticky {
    display: inherit;
}
.sticky-nav .dreamhub_menu li a {
    color: #fff;
}
.mobile-menu.mean-container {
    overflow: hidden;
}




/*=============================================
<--  Dreamhub Hero section Css -->
===============================================*/

.hero-section {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-sea {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-sea.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-air {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-air.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-rail {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-rail.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-warehouse {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-warehouse.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-doortodoor {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-doortodoor.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-section-insurance {
    /*background: url(../image/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px;*/

    background-image:url(../image/hero-bg-insurance.jpg);
    background-size:cover;
    min-height:500px;
    /*opacity:2;*/
}

.hero-right-thumb {
    position: relative;
    z-index: 1;
}

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

/*hero content*/

.hero-content h5 {
    font-size: 18px;
    font-weight: 500;
    color: #1e4799;
    font-family: 'Rubik';
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 6px;
}

.hero-content h5 i {
    padding-right: 5px;
}

.hero-content h1 {
    font-size: 50px;
    line-height: 50px;
}

/*description*/

.hero-description p {
    padding: 28px 0 25px;
    color:black;
    font-weight:600;
    /*color: #445781;*/
    font-size: 20px;
    width: 76%;
}


/*hero button*/

.hero-button {
    display: inline-block;
}

.hero-button {
    padding-left: 10px;
}

.hero-button a {
    padding: 14px 30px;
    color: #fff;
    background: #1e4799;
    border: 1px solid #1e4799;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.hero-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #060606;
    transform: scale(0.0,0);
    transition: .5s;
}

.hero-button a i {
    padding-left: 5px;
}

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

/*Shape
============*/

.hero-shape {
    position: absolute;
    bottom: 72px;
    right: 0;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.hero-shape2 {
    position: absolute;
    top: 230px;
    right: -25px;
    animation-name: movebounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.hero-shape3 {
    position: absolute;
    top: 229px;
    left: -40px;
    z-index: 1;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}



/*=============================================
<--  Dreamhub section title Css -->
===============================================*/

.dreamhub-section-title h1 {
    font-size: 46px;
    padding: 0 0 20px 0;
}

.dreamhub-section-title h3 {
    padding: 0 0 20px 0;
}

.dreamhub-section-title h5 {
    font-size: 18px;
    color: #090909;
    font-weight: 600;
}

.dreamhub-section-title p {
    padding: 0;
}

.text-center.dreamhub-section-title p {
    padding: 23px 0 10px;
    width: 47%;
    margin: auto;
}

.dreamhub-section-title.padding-lg {
    padding-bottom: 65px;
}

.dreamhub-section-title span {
    position: relative;
    z-index: 1;
}

.dreamhub-section-title span:before {
    position: absolute;
    content: "";
    top: -56px;
    left: -73px;
    opacity: 0.051;
    width: 226px;
    height: 226px;
    border-radius: 113px;
    background-color: #3a579b;
}

.email-discription {
    position: relative;
    z-index: 1;
    padding: 24px 0 110px 35px;
    float: right;
}

.email-discription:before {
    position: absolute;
    content: "";
    left: -20px;
    top: 0;
    width: 4px;
    height: 140px;
    border-radius: 2px;
    background-color: #1e4799;
}

.email-discriptionaaa {
    position: relative;
    z-index: 1;
    padding: 0 0 110px 35px;
    float: right;
}

.email-discriptionaaa:before {
    position: absolute;
    content: "";
    left: -20px;
    top: 0;
    /*width: 4px;
    height: 140px;*/
    border-radius: 2px;
    background-color: #1e4799;
}


/*button*/

.dreamhub-button {
    display: inline-block;
}

.dreamhub-button a {
    padding: 15px 35px;
    color: #fff;
    background: #1e4799;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: 30px;
}

.dreamhub-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #060606;
    transform: scale(0.0,0);
    transition: .5s;
}

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



/*dreamhub button*/

.marketing-button a {
    padding: 15px 35px;
    font-size: 16px;
    background: #1e4799;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    font-weight: 500;
    font-family: 'Barlow';
}

.marketing-button a i {
    padding-left: 5px;
}

.marketing-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 0;
    bottom: 0;
    left: inherit;
    top: inherit;
    width: 0;
    height: 0;
    background: #060606;
    border-radius: 5px;
    transition: .5s;
    opacity: 0;
}

.marketing-button a:hover:before {
    width: 100%;
    height: 100%;
    opacity: 1;
}



/*=============================================
<--  Dreamhub Service section Css -->
===============================================*/

.service-section {
    padding: 100px 0 90px;
}

.service-section .dreamhub-section-title.padding-lg {
    padding-bottom: 125px;
}

.dreamit-service-box {
    padding: 50px 50px 25px;
    border-radius: 5px;
    transition: .5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: rgba(225,225,225,0);
    border: 1px solid #0e4799;
}

.dreamit-service-box:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #0e4799;
    z-index: -1;
    transition: .5s;
}

.service-icon img {
    transition: .5s;
}

h2.service-title {
    font-size: 24px;
    font-weight: 500;
    font-family: 'Rubik';
    padding: 21px 0 12px;
    transition: .5s;
    color: #050505;
}

p.service-desctiption {
    display: inline-block;
    transition: .5s;
}

a.service-button {
    transition: .5s;
    font-family: 'Barlow';
    font-weight: 500;
}

a.service-button i {
    font-size: 18px;
    position: relative;
    top: 2px;
    padding-left: 5px;
    transition: .5s;
}

.dreamit-service-box:hover:before {
    width: 100%;
    left: 0;
}

.dreamit-service-box:hover a.service-button i{
    padding-left: 14px; 
}

.dreamit-service-box:hover .service-icon img {
    filter: brightness(0) invert(1);
}

.dreamit-service-box:hover h2.service-title, .dreamit-service-box:hover p.service-desctiption, .dreamit-service-box:hover a.service-button {
    color: #fff;
}




/*Style Two
===============*/

/*=============================================
<--  Dreamhub why choose us Section Css -->
===============================================*/

.why-choose-us-section.style-two {
    padding: 100px 0;
}

.why-choose-thumb {
    position: relative;
    z-index: 1;
}

/*Right Side*/

.choose-item {
    display: flex;
    padding: 16px 0 0;
}

.choose-item.upp {
    padding: 31px 0 0;
}

.choose-number span {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #1e4799;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin-top: 12px;
    margin-right: 12px;
}

.choose-content h2 {
    font-size: 22px;
    font-weight: 600;
    padding: 0 0 9px;
}

.choose-content p {
    width: 71%;
    margin: 0;
}

/*Shape*/

.shape {
    position: absolute;
    right: 193px;
    bottom: 0;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}


/*=============================================
<--  Dreamhub Feature Section Css -->
===============================================*/

.feature-section {
    padding: 145px 0 100px;
}

.feature-thumb {
    padding-left: 20px;
}

h5.feature-title {
    font-size: 18px;
    font-weight: 600;
    padding: 0 0 14px;
    margin: 0;
}

.feature-item-list ul li {
    list-style: none;
    display: block;
    color: #060606;
    font-weight: 600;
    font-family: "Barlow";
    padding: 0px 0 6px;
}

.feature-item-list ul li span {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 13px;
    background-color: #1e4799;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin-top: 12px;
    margin-right: 12px;
}


.feature-section .single-counter-box {
    text-align: left;
}


/*=============================================
<--  Dreamhub Counter Section Css -->
===============================================*/

.counter-section {
    padding: 0 0 70px;
}

.style-two.counter-section {
    padding: 80px 0 70px;
    background: #f7faff;
}

.single-counter-box {
    margin-bottom: 30px;
    text-align: center;
}

.counter-title h2 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1px;
    display: inline-block;
}

.counter-text span {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Barlow';
    color: #1e4699;
    padding: 6px 0 0;
    display: inline-block;
}




/*=============================================
<--  Dreamhub Testimonial section Css -->
===============================================*/

.testimonial-section {
    padding: 100px 0 100px;
    background: #f7faff;
}

.testimonial-section .dreamhub-section-title {
    padding-right: 108px;
}


.testimonial-single-box {
    background: #1e4799;
    padding: 34px 35px 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}

.testi-thumb img {
    display: inline-block !important;
}

.testi-people-info {
    padding: 2px 0 0;
}

.testi-rating ul li {
    list-style: none;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 3px;
    padding: 9px 0 0px;
    color: #fff;
}

.testimonial-desc p {
    font-size: 16px;
    color: #fff;
    font-style: italic;
    font-family: "Barlow";
    padding: 36px 0 0;
}

.testi-title h4 {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    padding: 0px 0 2px;
    transition: .5s;
}

.testi-title h4 span {
    font-size: 14px;
    color: #060606;
    padding-left: 4px;
}

/*Owl Dots*/

.owl-dots {
    text-align: center;
    margin: 43px 0px 0;
}

.owl-dot {
    width: 12px;
    height: 12px;
    background: #060606;
    display: inline-block;
    margin-left: 8px;
    border-radius: 10px;
}

.owl-dot.active {
    background: #1e4799;
    transition: .5s;
}

/*--==============================================->
  <!-- Start Dreamhub Blog Css -->
 ==================================================-*/

.blog-section {
    padding: 90px 0 70px;
}

/*single blog box*/

.email-single-blog-box {
    margin-bottom: 30px;
}

 /*blog thumb*/

.email-blog-thumb img {
    width: 100%;
    transition: .5s;
}

.email-blog-thumb {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.email-blog-thumb:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #1e4799;
    opacity: .45;
    transition: .5s;
}

/*blog content*/

.email-blog-content {
    padding: 30px 35px 30px;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.15));
    background-color: #ffffff;
}


/*post categories*/

.post-categories p {
    margin-bottom: 0;
    color: #616161;
}

.post-categories p i {
    color: #1e4799;
    padding-right: 5px;
}

span.post {
    padding-left: 20px;
}

/*blog title*/

.blog-title h2{
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    display: inline-block;
    transition: .5s;
    color: #060606;
    padding: 0px 0 15px;
}

.blog-title p{
    font-size: 16px;
    /*font-weight: 600;*/
    line-height: 20px;
    display: inline-block;
    transition: .5s;
    color: #060606;
    padding: 0px;
}

.blog-button a {
    font-weight: 500;
    color: #1e4799;
    transition: .5s;
}

.blog-button a i {
    padding-left: 5px;
    transition: .5s;
    font-size: 18px;
    position: relative;
    top: 3px;
}

/*blog all hover*/

.blog-button a:hover i {
    padding-left: 14px;
}

.blog-title h2 a:hover {
    color: #1e4799;
}

.email-single-blog-box:hover .email-blog-thumb:before {
    width: 100%;
    left: 0;
}


/*=============================================
<--  Dreamhub Subscribe section Css -->
===============================================*/

.row.subscribe-bg {
    background: url(../image/subs-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 80px 0 100px;
    margin-bottom: -190px;
    z-index: 1;
    position: relative;
}

.subscribe-content h1 {
    font-size: 46px;
    font-weight: 600;
    color: #fff;
}

.subscribe-content p {
    color: #fefefe;
    font-family: 'Barlow';
    opacity: .6;
    padding: 24px 0 16px;
    display: inline-block;
}

.subscribe input {
    padding-left: 20px;
    height: 54px;
    width: 32%;
    color: #fff;
    border: 1px solid #fff;
    background: #fff;
    position: relative;
}

span.subs-btn a {
    border: 0;
    font-size: 15px;
    color: #fff;
    height: 55px;
    padding: 15px 25px;
    background: #060606;
    position: relative;
    left: -4px;
    display: inline-block;
}


/*=============================================
<--  Dreamhub Footer section Css -->
===============================================*/

.footer-section {
    /*background: #021741;*/
    background: #f8f9fa;
    padding: 100px 0 0px;
    margin-top:50px;
}

.row.footer-bg {
    border-bottom: 1px solid rgba(255,255,255,0.25882352941176473);
    padding: 0px 0 80px;
}


/*widget title
==================*/

h4.widget-title {
    font-size: 22px;
    color: #000;
    font-weight: 600;
    margin-top: 0;
    padding: 0 0 33px;
}

.company-info-desc p {
    color: #000;
    padding: 32px 0 15px;
    font-family: 'Barlow';
}

/*social icon
======================*/

.follow-company-icon a {
    font-size: 14px;
    display: inline-block;
    color: #000;
    margin-right: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 19px;
    background-color: rgba(58,87,155,0);
    border: 1px solid #ffffff;
    position: relative;
    z-index: 1;
}

.follow-company-icon a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 50px;
    transform: scale(0);
    transition: .5s;
}

/*footer menu
==================*/

ul.footer-menu li {
    display: block;
    list-style: none;
    padding: 12px 0 0;
}

ul.footer-menu li a {
    color: #000;
    transition: .5s;
    font-size: 15px;
}

ul.footer-menu li a i {
    padding-right: 8px;
}

/*company contact info
===========================*/

.company-contact-info {
    overflow: hidden;
    padding: 15px 0 0;
} 

.company-contact-info p {
    padding: 0px 0 0px;
    color: #000;
    align-items: center;
    display: flex;
    font-family: 'Barlow';
}

.company-contact-info p i {
    font-size: 15px;
    display: inline-block;
    color: #000;
    margin-right: 10px;
    transition: .5s;
    float: left;
}

/*footer all hover
=======================*/

ul.footer-menu li a:hover {
    color: #1e4799;
}

.follow-company-icon a:hover:before {
    transform: scale(1);
}

.follow-company-icon a:hover {
    color: #1e4799;
}

/**footer bottom area
==========================**/

.row.footer-bottom {
    padding: 24px 0 20px;
}

.footer-bottom-content {
    padding: 10px 0 0;
}

.footer-bottom-content-copy p {
    color: #000;
    font-family: 'Barlow';
}

.footer-bottom-content-copy span {
    color: #1e4799;
}

/*=============================================
<--  Dreamhub Breatcam section Css -->
===============================================*/


.breatcam-section {
    background: url(../image/brtcm-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 450px;
}

/*breatcam title*/

.breatcam-title h1 {
    font-size: 50px;
    color: #fff;
}

/*breatcam menu*/

.breatcam-menu ul li {
    display: inline-block;
    list-style: none;
    padding: 17px 0px 0 0px;
    color: #fff;
    font-family: 'Barlow';
}

.breatcam-menu ul li a {
    color: #fff;
    transition: .5s;
    position: relative;
    padding: 0 50px 0 0;
    font-size: 18px;
    font-family: 'Barlow';
}

.breatcam-menu ul li a:before {
    position: absolute;
    content: "";
    right: 14px;
    bottom: 9px;
    height: 1px;
    width: 20px;
    background: #fff;
}

.breatcam-menu ul li a:hover {
    color: #6950ff;
}

/*=============================================
<--  Dreamhub Brand section Css -->
===============================================*/

.brand-section {
    background: #f6f9ff;
    padding: 100px 0 100px;
    text-align: center;
}

.brand-single-box {
    display: inline-block;
}

.brand-thumb img {
    filter: brightness(.1);
    transition: .5s;
}

.brand-single-box:hover .brand-thumb img {
    filter: brightness(1);
}

/*owl carousel*/
.owl-nav {
    opacity: 0;
    transition: .5s;
}
.owl-next {
    position: absolute;
    right: -125px;
    top: 0;
    transition: .5s;
}
.owl-prev {
    position: absolute;
    left: -125px;
    top: 0;
    transition: .5s;
}
.owl-prev i, .owl-next i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    background: #1e4799;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
}

.row.brand-bg:hover .owl-nav {
    opacity: 1;
}

.row.brand-bg:hover .owl-next {
    right: -65px;
}

.row.brand-bg:hover .owl-prev {
    left: -65px;
}


.active.center .brand-single-box .brand-thumb img {
    filter: brightness(1);
}

/*=============================================
<--  Dreamhub Video section Css -->
===============================================*/

.video-section {
    padding: 0 0 150px;
}

.row.video-bg {
    background: url(../image/video.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    text-align: center;
    align-items: center;
}

.rs-video .animate-border a {
    color: #fff;
    background: transparent;
    font-size: 68px;
    width: 146px;
    height: 146px;
    line-height: 146px;
    background-color: rgba(58,87,155,0);
    border: 3px solid #ffffff;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
}


/*=============================================
<--  Dreamhub Faq section Css -->
===============================================*/

.faq-section {
    padding: 90px 0 100px;
}

.faq-thumb {
    padding-left: 70px;
}

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

/*Accordion
=====================*/

.tab_container {
    overflow: hidden;
    padding: 20px 0 0;
}

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

.accordion li:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 20px;
    top: 16px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background-color: #1e4799;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    color: #232353!important;
    background-color: transparent;
    border: 1px solid #1e4799;
    padding: 14px 20px 14px 30px;
    border-radius: 5px;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    padding: 25px 20px 25px 30px;
    margin: 0;
    background: rgba(30, 71, 153, .1);
    backdrop-filter: blur(1.9px);
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

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

.accordion a:after {
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 28px;
    content: " ";
    top: 26px;
    transition: all 0.2s ease-in-out;
}

.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  background: #fff;
}

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

.accordion a.active {
    color: #fff!important;
    border: 1px solid #1e4799!important;
    background: #1e4799!important;
    border-radius: 5px 5px 0 0;
}

/*=============================================
<--  Dreamhub Pricing section Css -->
===============================================*/

.pricing-section {
    padding: 90px 0 90px;
}


.pricing-single-items {
    padding: 0px 0 64px;
    text-align: center;
    margin-bottom: 30px;
    background: #fff;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.2));
    position: relative;
    z-index: 1;
}

.pricing-single-items:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: #3a579b;
    width: 0;
    height: 100%;
    transition: .5s;
    z-index: -1;
}

/*pricing head*/

.pricing-head {
    padding: 51px 0 12px;
    transition: .5s;
}

.pricing-title h3 {
    font-size: 18px;
    font-weight: 600;
    padding: 0px 0 29px;
    transition: .5s;
}

.pricing-item-text span {
    display: inline-block;
    font-size: 60px;
    font-weight: 600;
    text-align: center;
    color: #050505;
    transition: .5s;
    font-family: 'Barlow';
}

/*pricing boody*/

.pricing-body {
    padding: 0px 50px 0;
    text-align: center;
}

h4.prc-bd-title {
    font-size: 18px;
    font-weight: 600;
    text-decoration: underline;
    color: #050505;
    padding: 0 0 15px;
    transition: .5s;
}

.pricing-item-list ul li {
    display: block;
    font-size: 16px;
    padding: 4px 0;
    color: #050505;
    font-family: 'Barlow';
    transition: .5s;
}

.pricing-item-list ul li i {
    color: #3a579b;
    padding-right: 2px;
    font-size: 18px;
    transition: .5s;
}

/*button*/

.btn-common.pc-btn a {
    color: #fff;
    background: #3a579b;
    font-weight: 600;
    font-family: "Barlow";
    padding: 11px 38px;
    border: 2px solid transparent;
    margin-top: 32px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.btn-common.pc-btn a:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: #060606;
    z-index: -1;
    transition: 0.5s;
    transform: scale(0.0, 1);
    opacity: 0;
}

.pricing-single-items:hover:before {
    width: 100%;
    left: 0;
}

.pricing-single-items:hover .btn-common.pc-btn a{
   color: #fff;
}

.pricing-single-items:hover .btn-common.pc-btn a:before {
    transform: scale(1);
    opacity: 1;
}

.pricing-single-items:hover .pricing-item-text span, .pricing-single-items:hover .pricing-title h3, 
.pricing-single-items:hover h4.prc-bd-title, .pricing-single-items:hover .pricing-item-list ul li, .pricing-single-items:hover .pricing-item-list ul li i  {
    color: #fff;
}

/*active box*/
.active.pricing-single-items {
    background: #3a579b;
}

.active .pricing-item-text span, .active .pricing-title h3, .active h4.prc-bd-title, .active .pricing-item-list ul li, .active .pricing-item-list ul li i {
    color: #fff;
}

.active .btn-common.pc-btn a {
    color: #fff;
    background: #3a579b;
}

.active .btn-common.pc-btn a:before{
    transform: scale(1);
    opacity: 1;
}


/* Team Section
===============================================*/

.team-section {
    padding: 90px 0 90px;
}

.single_team_box {
    margin-bottom: 30px;
}

.single_team_thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.single_team_thumb img {
    width: 100%;
    transition: .5s;
}

/*team content*/

.single_team_content {
    padding: 20px 0 25px;
    background: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
    filter: drop-shadow(0 0 23px rgba(0,0,0,0.1));
    border-radius: 0 0 5px 5px;
    transition: .5s;
}

.team-title h4 {
    font-size: 22px;
    font-weight: 600;
}

.team-title span {
    font-size: 16px;
    padding: 10px 0 0;
    display: inline-block;
}

.single_team_icon2 {
    position: absolute;
    left: 0;
    bottom: -56px;
    opacity: 0;
    transition: .5s;
    background: #1e4799;
    padding: 38px 0 30px;
    width: 100%;
    border-radius: 5px 5px 0px 0;
    transition: .5s;
}

.single_team_icon2 a {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 32px;
    border-radius: 30px;
    background: #fff;
    text-align: center;
    color: #1e4799;
    font-size: 14px;
    margin-right: 5px;
    transition: .5s;
    transition-delay: .5s;
    overflow: hidden;
    transform: translateX(0px);
}

.single_team_icon2 a:nth-child(1) {
    transition-delay: .2s;
}

.single_team_icon2 a:nth-child(2) {
    transition-delay: .3s;
}

.single_team_icon2 a:nth-child(3) {
    transition-delay: 0.4s;
}

.single_team_icon2 a:nth-child(4) {
    transition-delay: 0.5s;
}

.single_team_icon2 a:hover {
    background: #060606;
    color: #fff;
}

.single_team_box:hover .single_team_icon2 a {
    transform: translateX(73px);
    overflow: hidden;
    visibility: visible;
}

.single_team_box:hover .single_team_icon2 {
    opacity: 1;
    bottom: 0px;
}

.single_team_box:hover .single_team_content {
    border-bottom: 1px solid #1e4799;
}

/*contact form
==================================================-->*/

.contact-section {
    padding: 100px 0 100px;
}

.people-address-info {
    padding: 79px 50px 74px;
    background: #1e4799;
    text-align: center;
    margin-left: 15px;
    position: relative;
    z-index: 1;
}

.people-name h5 {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    padding: 25px 0 21px;
}

.people-discription p {
    color: #fff;
    width: 68%;
    margin: auto;
}

/*Social Info*/

.social-info-icon {
    position: absolute;
    right: 30px;
    top: 30px;
}

.social-info-icon ul li {
    list-style: none;
    padding: 0 0 0;
}

.social-info-icon ul li a {
    font-size: 20px;
    display: block;
    color: #3a579b;
    width: 50px;
    height: 52px;
    line-height: 38px;
    padding: 10px 0px;
    text-align: center;
    background-color: #ffff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.social-info-icon ul li a:before {
    position: absolute;
    content: "";
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0px;
    width: 30px;
    height: 1px;
    background: #3a579b;
    border-radius: 50px;
    transition: .5s;
}

li.social a:before{
    position: inherit !important;
}

.social-info-icon ul li a:hover {
    color: #060606;
}

/*form box*/

span.form-title {
    color: #000000;
    padding: 0 0 5px;
    display: inline-block;
}

.form-box input {
    height: 50px;
    background-color: transparent;
    border: 1px solid #1e4799;
    transition: .5s;
    padding: 0px 25px;
    display: block;
    width: 100%;
    color: #0D0E14;
    margin-bottom: 30px;
    border-radius: 5px;
}

.form-box input::placeholder {
    opacity: .5;
}

.form-box textarea {
    height: 120px;
    background-color: transparent;
    border: 1px solid #1e4799;
    transition: .5s;
    padding: 15px 25px;
    display: block;
    width: 100%;
    border-radius: 5px;
}

.form-box textarea::placeholder {
    opacity: .5;
}

.contact-form {
    display: inline-block;
}

.contact-form button {
    padding: 13px 35px;
    height: 55px;
    background: #1e4799;
    border: 1px solid #1e4799;
    color: #fff;
    display: inline-block;
    margin-top: 40px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

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

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

.contact-form:hover button {
    color: #232353;
}


/*contact info section
==========================*/

.contact-info-section {
    padding: 90px 0 90px;
    background: #f6f9ff;
}

.contact-information2 {
    margin-bottom: 30px;
}

.contact-info-section .contacts-icon {
    float: left;
    margin-right: 20px;
}

.contact-info-section .contacts-icon i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: #1e4799;
    text-align: center;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    display: inline-block;
    transition: .5s;
}

.contact-info-section .contacts-title h5 {
    font-weight: 500;
    font-size: 17px;
}

.contact-info-section .contacts-title h6 {
    font-size: 20px;
    font-weight: 600;
    padding: 0;
}

.contact-information2:hover .contacts-icon i {
    transform: rotateY(180deg);
}

iframe {
    border: 0;
    padding-right: 12px;
}

.map-section {
    padding: 0 0 100px;
}

/*=============================================
<--  Dreamhub Blog details section Css -->
===============================================*/

.blogs-section {
    padding: 140px 0 140px;
}


/*Blog Left
=================*/

.widget-recent-post {
    padding-top: 30px;
    margin-bottom: 30px;
}

.categories-title2 h4 {
    font-size: 24px;
    color: #222222;
    font-weight: 600;
    margin-top: 0;
    border-bottom: 2px solid #1e4799;
    padding: 0 0 18px;
}

/*Recent Post*/

.rpost-title h4 a {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Barlow';
    color: #222222;
}

.rpost-thumb {
    padding-right: 25px;
}

/*Items Tag*/

.tag-item2 {
    padding: 30px 0 0;
}

.tag-item2 a {
    background: #fff;
    padding: 7px 22px;
    display: inline-block;
    margin: 0px 6px 15px 0;
    border: 1px solid #1e4799;
    font-weight: 500;
    font-family: 'Barlow';
    color: #060606;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.tag-item2 a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #1e4799;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}

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

.tag-item2 a:hover:before {
    transform: scale(1);
}




/*Blog Right*/

.blog-single-box2.upp {
    padding: 0 0px 0 15px;
}

/*blog single box*/

.blog-single-box2 {
    padding: 30px 30px 0 0;
}

/*blog thumb*/

.blog-thumb2 a img {
    width: 100%;
}

/*blog title*/

h5.blog-dtls-title {
    font-size: 24px;
    font-weight: 600;
    padding: 0 0 18px;
    margin-top: 0;
}


/*blog quote*/

.blogs-content2 {
    padding: 30px 0 0;
}

.blog-quotes {
    border-left: 5px solid #1e4799;
    font-style: italic;
    position: relative;
    z-index: 1;
    line-height: 1.5;
    background-color: #060606;
    padding: 50px 39px 55px 37px;
    text-align: center;
    margin: 25px 0 25px;
}

.blog-quotes p {
    font-size: 20px;
    margin: 0 0 9px;
    color: #fff;
    font-weight: 500;
}

.blog-quotes span {
    color: #fff;
    position: relative;
    z-index: 1;
}

.blog-quotes span:before {
    position: absolute;
    content: "";
    left: -42px;
    bottom: 9px;
    width: 30px;
    height: 2px;
    background: #6950ff;
}

.blog-quotes i {
    display: inline-block;
    position: absolute;
    font-size: 170px;
    top: -18px;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: .5;
}

.row.blogs {
    padding: 10px 0 30px;
}

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

.widget-comments-title h2 {
    font-size: 20px;
    color: #222222;
    font-weight: 600;
    padding: 10px 0 15px;
}

.blogs-section .form-box input {
    background-color: rgba(40,40,40,0);
    border: 1px solid #000000;
}

.blogs-section .form-box textarea {
    height: 190px;
    background-color: rgba(40,40,40,0);
    border: 1px solid #000000;
}


/*pagination*/

.pagination-menu {
    text-align: center;
    padding: 50px 0 0;
}

.pagination-menu ul {
    display: inline-block;
}

.pagination-menu ul li {
    display: inline-block;
    list-style: none;
    padding-right: 10px;
}

.pagination-menu ul li a {
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid #1e4799;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.pagination-menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #1e4799;
    border-radius: 40px;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.pagination-menu ul li a:hover:before {
    transform: scale(1);
}
.pagination-menu ul li a:hover {
    color: #fff;
}




/*=====================================
<-- Dream hub Error Area Css -->
=======================================*/

.error-area {
    padding: 100px 0 100px;
}

.error-thumb {
    text-align: center;
}

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

.error-content h2 {
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.error-content h2 span {
    color: #0e4799;
}

.error-content p {
    font-size: 18px;
    padding-top: 15px;
    padding-bottom: 20px;
}

.error-search {
    text-align: center;
}

.error-button {
    text-align: center;
    margin-top: 40px;
}

.error-search input {
    width: 50%;
    height: 58px;
    border: 1px solid rgba(35,35,35,0.12);
    border-radius: 30px;
    padding-left: 30px;
    outline: 0;
}

.error-search button {
    outline: 0;
    border: 0;
    background: transparent;
    position: relative;
    margin-left: -55px;
    color: #686868;
}

.error-search ::placeholder{
    color:#686868;
}

.error-button a {
    padding: 14px 40px 14px 40px;
    font-weight: 500;
    color: #fff;
    background: #0e4799;
    display: inline-block;
    border-radius: 30px;
    border: 1px solid #0e4799;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.error-button a i {
    margin-right: 5px;
}

.error-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: #060606;
    border-radius: 30px;
    transition: .5s;
}

.error-button a:hover{
    border-color: #140d36;
}

.error-button a:hover:before {
    width: 100%;
    left: 0;
}


/*
<!-- ============================================================== -->
<!-- print_shop Scrollup 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%, #c1282a 100%);
    background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 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: #1e4799;
}

 .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, #ff5a3c 0%, #ff5a3c 100%);
    background-image: -webkit-linear-gradient(0deg, #1e4799 0%, #1e4799 100%);
    border-radius: 100%;
}

.top-wrap .go-top-button:hover {
      background-color: #060606;
      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); } }


/*Animation
==================*/

@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

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

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


@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

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

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


/*** 
====================================================================
    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(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;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #DA242B;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    border-right: 3px solid #062462;
    border-left: 3px solid #062462;
    -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: #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: #ED1C24;
    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;
}

.search-box-btn {
    display: inline-block;
    padding-left: 22px;
}

.search-box-btn i {
    display: inline-block;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: .5s;
}

.upp.search-box-btn i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.upp.search-box-btn.search-box-outer span i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i:after {
    position: absolute;
    content: "0";
    right: -10px;
    top: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #ED1C24;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 12px;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}


span.flaticon-multiply i {
    display: inline-block;
    color: #ED1C24;
}

.header-search-button.search-box-outer {
    padding: 0 25px 0 30px;
    display: inline-block;
}

.header-search-button.search-box-outer a {
    color: #39364e;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 18px;
    background-color: rgba(21,43,99,0.10196078431372549);
    display: inline-block;
}


/*--==============================================->
  <!-- hendre Animation Dance -->
 ==================================================-*/
/**/
.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);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

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

    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}


/*rotateme animation*/

.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.zidingyi-ul-li {
    padding:20px;
}