/*===============================================
Template Name: dreamhub - Transport & Logistics HTML5 Template
Author:  https://templatemonster.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: dreamhub
Tags:   delivery company, grid, logistics, moving, moving company, shipping, courier, shipping company, storage, transport, transport company, warehouse.
================================================*/
    
/*TABLE OF CONTENTS*/
/*=====================
01. dreamhub Header Top Menu Area Css
02. dreamhub Nav Menu Area Css 
03. dreamhub hero Area Css
04. dreamhub Breadcumb Area Css
05. dreamhub service Area Css
06. dreamhub service-details-Area Css
07. dreamhub Section Title Css
08. dreamhub About Area Css
09. dreamhub pricing Area Css
10. dreamhub testimonial Area Css
11. dreamhub contact Area Css
12. dreamhub faq Area Css
13. dreamhub blog-grid Area Css
14. dreamhub blog-list Area Css
15. dreamhub blog-2column Area Css
16. dreamhub blog-details Area Css
17. dreamhub team Area Css
18. dreamhub project Area Css
19. dreamhub project-details Area Css
20. dreamhub shop Area Css
21. dreamhub shop-details Area Css
22. dreamhub work Area Css
23. dreamhub counter Area Css
24. dreamhub work-process Area Cs
15. dreamhub footer-Area Css
=======================*/


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


.dreamhub_nav_manu {
    padding: 0 100px;
    background: #111111;
}

.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: #111111!important;
    z-index: 500;
    padding: 0 100px;
    transition: .5s !important;
    z-index: 500;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .logo {
    margin-top: 0;
}

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

/* dreamhub Menu Css*/

nav.dreamhub_menu {
    text-align: right;
}

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

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

.dreamhub_menu > ul > li > a {
    display: block;
    margin: 36px 12px 22px;
    -webkit-transition: .5s;
    font-size: 17px;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
}

nav.dreamhub_menu ul li a i {
    display: inline-block;
    font-size: 11px;
    padding-left: 6px;
}

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

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

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



/*** 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;
    opacity: 0;
    border-bottom: 3px solid #CD9E50;
    border-top: 3px solid #CD9E50;
}

.dreamhub_menu ul li:hover>.sub-menu {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     visibility: visible;
     top: 100%;
     opacity: 1;
     z-index: 9999;
 }

.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;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: .1s;
    visibility: inherit !important;
    color: #211e3b !important;
    text-decoration: none;
    transition: .5s;
}

.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:#CD9E50;
     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:100%;
}

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

.main_sticky {
    display: none;
}

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

.sticky .dreamhub_menu li a {
    color: #fff;
}

.dreamhub_nav_manu.sticky a.dtbtn {
    color: #fff;
    background: #F16722;
    border: 2px solid #F16722;
}

.dreamhub_nav_manu.sticky a.dtbtn:hover {
    color: #43baff;
}

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


.header-search {
    display: inline-block;
    margin-left: -81px;
}

.search input {
    outline: 0;
    background: #343434;
    border: none;
    border-radius: 17px;
    height: 34px;
    padding: 0 44px 0 21px;
    width: 50%;
    color: #fff;
}

button.icons {
    background: none;
    border: none;
    color: #fff;
    position: relative;
    left: -44px;
    font-size: 15px;
}

/*=====================================
<--  start dreamhub hero Area Css -->
=======================================*/


.hero-area {
    background: url(../image/hero-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 810px;
}

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

h5.hero-sub-title {
    color: #ce9e51;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

h5.hero-sub-title::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 67px;
    background: #fff;
    top: 14px;
    left: -73%;
}

h5.hero-sub-title:after {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    background: #ffffff;
    top: 9px;
    left: -18px;
    border-radius: 50%;
}

h5.hero-sub-title span::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 67px;
    background: #fff;
    top: 15px;
    right: -73%;
}

h5.hero-sub-title span::after {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    background: #fff;
    border-radius: 50%;
    top: 10px;
    right: -19px;
}

h1.hero-main-title {
    font-size: 60px;
    font-family: "Gilda Display";
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}

p.hero-desc {
    color: #fff;
    opacity: 0.9;
    width: 32%;
    margin: auto;
    line-height: 24px;
    padding: 16px 0 41px;
}

.hero-btn a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    background: #CE9F51;
    padding: 14px 40px 17px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-btn a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    background: #070707;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
    transform: scale(0);
    opacity: 0;
}

.hero-btn a:hover::before {
    transform: scale(1);
    opacity: 1;
    height: 100%;
    width: 100%;
}



/*=====================================
<--  end dreamhub hero Area Css -->
=======================================*/


/*=====================================
<--  start dreamhub section-title Area Css -->
=======================================*/

.section-title.text-center {
    margin-bottom: 102px;
}

.project-area .section-title.text-center {
    margin-bottom: 79px;
}

.faq-area .section-title.text-center {
    margin-bottom: 55px;
}

.section-sub-title h5 {
    font-size: 20px;
    font-weight: 600;
    color: #CE9E51;
    margin-bottom: 15px;
}

.section-main-title h1 {
    font-size: 46px;
    font-weight: 400;
    color: #ffffff;
    font-family: "Gilda Display";
    margin: 0;
}

.pricing-area .section-main-title h1 {
    font-weight: 600;
    color: black;
}

.pricing-area .section-title.text-center {
    margin-bottom: 57px;
}

.project-area.style-two .section-main-title h1 {
    color: black;
}

.faq-area .section-main-title h1 {
    font-weight: 600;
    color: black;
}

.about-area .section-main-title h1 {
    font-weight: 600;
    color: #070707;
}

.section-title-desc p {
    padding: 15px 0 37px;
    margin: 0;
}

.dreamhub-bar {
    position: relative;
    content: "";
    background: #CE9F51;
    height: 6px;
    width: 6px;
    margin: auto;
    border-radius: 50%;
    top: 25px;
}

.dreamhub-bar::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 244px;
    background: #343434;
    top: 3px;
    left: 20px;
}

.dreamhub-bar:after {
    position: absolute;
    content: "";
    height: 1px;
    width: 244px;
    background: #343434;
    top: 3px;
    right: 20px;
}



/*=====================================
<--  end dreamhub section-title Area Css -->
=======================================*/





/*=====================================
<--  start dreamhub work Area Css -->
=======================================*/


.work-area {
    background: #070707;
    padding: 109px 0 81px;
}

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

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

.work-thumb::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    background: #070707;
    opacity: 0;
    right: 0;
    transition: .5s;
}

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

.work-icon {
    position: absolute;
    bottom: -11%;
    right: 14%;
    background: #CD9E50;
    width: 57px;
    height: 57px;
    line-height: 53px;
    text-align: center;
}

.work-icon img {
    width: fit-content;
}

.work-content {
    padding: 29px 32px 0 0;
}

h3.work-title {
    font-size: 20px;
    font-weight: 400;
    font-family: "Gilda Display";
    color: #fff;
    margin: 0;
	position: relative;
}

h3.work-title::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 75px;
    background: #CD9E50;
    bottom: -13px;
	transition: .5s;
}

h3.work-title span {
    color: #ce9e51;
}

p.work-desc {
    font-size: 16px;
    color: #919191;
    line-height: 24px;
    padding: 26px 0 21px;
    margin: 0;
}

.work-btn a {
    display: inline-block;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
	transition: .5s;
}

.work-btn a i {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-left: 8px;
	transition: .5s;
}

.work-single-box:hover h3.work-title::before {
    background: #FAB802;
}

.work-single-box:hover .work-btn a i {
    color: #CD9E50;
}

.work-single-box:hover .work-btn a {
    color: #CD9E50;
}

.work-single-box:hover .work-thumb::before {
    width: 100%;
    opacity: 0.3;
    left: 0;
}




/*=====================================
<--  end dreamhub work Area Css -->
=======================================*/






/*=====================================
<--  start dreamhub work-Process area Css -->
=======================================*/

.work-process-area {
    background: url(../image/work-process-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 109px 0 248px;
}

.row.work {
    border-bottom: 2px solid #CE9F51;
}

.work-process-single-box {
    background: #070707;
    text-align: center;
    padding: 41px 0 49px;
    margin: 0 36px 0 36px;
    position: relative;
    z-index: 1;
}

.work-process-icon img {
    transition: .5s;
}

.work-process-single-box::before {
    position: absolute;
    content: "";
    height: 84px;
    width: 1px;
    background: #CE9F51;
    bottom: -47%;
}

.work-process-single-box:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 0%;
    background: #CE9F51;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
    transform: scale(0);
}

h3.work-process-title {
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
    padding: 25px 0 0;
	position: relative;
}

h3.work-process-title::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 51%;
    background: #fff;
    bottom: -8px;
}

.work-process-numbar span {
    font-size: 42px;
    position: absolute;
    color: #ffffff;
    font-weight: 600;
    animation: dance 2s alternate infinite;
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
    left: 0;
    right: 0;
}

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

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

.work-process-single-box:hover:after {
    opacity: 1;
    height: 100%;
    width: 100%;
    transform: scale(1);
    right: 0;
    top: 0;
}

.work-process-single-box:hover .work-process-icon img {
	filter: brightness(0) invert(1);
}


.work-process-numbar {
    position: relative;
    top: 45%;
    text-align: center;
    height: 105px;
    width: 105px;
    line-height: 100px;
    margin: auto;
    background-color: #070707!important;
    border-radius: 50%;
}

.work-process-numbar::before {
    position: absolute;
    content: "";
    height: 105px;
    width: 105px;
    border: 2px dotted #CD9E50;
    left: 0;
    border-radius: 50%;
    -webkit-animation-name: rotateme;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}







/*=====================================
<--  start dreamhub project area Css -->
=======================================*/


.project-area {
    padding: 109px 0 87px;
    background: #070707;
}


/* Portfolio Nav */
.portfolio_nav {
    margin-bottom: 50px;
}

.portfolio_menu ul {
    text-align: center;
    list-style: none;
    padding: 0;
}

.portfolio_nav ul li {
    border: 1px solid #343434;
    font-size: 15px;
    transition: all 0.5s ease 0s;
    cursor: pointer;
    color: #FEFEFE;
    padding: 7px 27px;
    font-weight: 400;
    position: relative;
    margin-right: 17px;
    display: inline-block;
}

.portfolio_menu ul li a{
    display: block;
    color:#fff;
    text-transform:uppercase;
    position:relative;
    transition:.5s;


}

.portfolio_menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 24px;
    height: 2px;
    width: 0%;
    background: #fff;
    transition:.5s;
}

.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff;
    background: #CE9F51;
}


.single-project-box {
    margin-bottom: 30px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.single-project-box::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    background: #CE9F51;
    top: 0;
    right: 0;
    transition: .5s;
    opacity: 0;
}

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

.project-content {
    position: absolute;
    top: -45%;
    padding: 0 41px 0;
    opacity: 0;
    transition: .5s;
}

span.project-numbar {
    display: inline-block;
    font-size: 100px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 48px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
}

h3.project-title a {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    width: 62%;
    line-height: 28px;
    text-decoration: none;
}

p.project-desc {
    color: #EBEDEC;
    width: 85%;
    margin: 0;
    padding: 6px 0 11px;
}

.project-btn a {
    font-size: 16px;
    text-decoration: none;
    color: #fff;
}

.project-btn a i {
    font-size: 18px;
    position: relative;
    top: 3px;
    margin-left: 7px;
}

.single-project-box:hover::before {
    opacity: 1;
    width: 100%;
    left: 0;
}

.single-project-box:hover .project-content{
    opacity: 1;
    top: 23%;
}

/*=====================================
<--  end dreamhub project area Css -->
=======================================*/





/*=====================================
<--  start dreamhub counter area Css -->
=======================================*/



.counter-area {
    background: url(../image/counter-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 104px 0 83px;
}

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

.counter-number h2 {
    font-size: 50px;
    display: inline-block;
    color: #fff;
    font-weight: 400;
    font-family: "Gilda Display";
    margin-bottom: 11px;
}

.counter-text span {
    display: inline-block;
    font-size: 20px;
    color: #ce9e51;
    font-weight: 400;
}


/*=====================================
<--  end dreamhub counter area Css -->
=======================================*/






/*=====================================
<--  start dreamhub testimonial area Css -->
=======================================*/


.testimonial-area {
    background: #070707;
    padding: 110px 0 118px;
}

.testimonial-single-box {
    background: #202020;
    padding: 37px 112px 39px 35px;
    display: flex;
    position: relative;
}

.testi-icon {
    position: absolute;
    right: 6%;
    top: 12%;
}

.testi-people-info {
    margin-right: 50px;
}

.people-thumb {
    margin-bottom: 16px;
}

.testi-people-content {
    text-align: center;
}

h4.testi-people-title {
    font-size: 18px;
    color: #ce9e51;
    margin: 0;
    padding: 14px 0 0;
}

span.testi-people-text {
    display: inline-block;
    color: #fff;
    font-weight: 400;
}

h3.testi-title {
    font-size: 20px;
    font-family: "Gilda Display";
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 9px;
}

p.testi-desc {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-style: italic;
    line-height: 19px;
    color: #919191;
}


/*=====================================
<--  end dreamhub testimonial area Css -->
=======================================*/





/*=====================================
<--  start dreamhub blog area Css -->
=======================================*/

.blog-area {
    background: #111111;
    padding: 110px 0 82px;
}

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

.blog-thumb img {
    width: 100%;
    transform: scale(1);
    transition: .5s;
}

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

.blog-date {
    position: absolute;
    right: 0;
    z-index: 1;
    top: -17px;
}

.blog-date h4 {
    margin: 0;
    background: #FFFFFF;
    color: #ce9e51;
    font-size: 16px;
    font-weight: 300;
    padding: 3px 18px 6px;
    text-align: center;
}

.blog-content {
    padding: 31px 21px 0;
    position: relative;
}

h3.blog-title a {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Gilda Display";
    margin: 0;
    position: relative;
    transition: .5s;
    text-decoration: none;
    display: inline-block;
}

h3.blog-title a::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 75px;
    background: #CE9F51;
    bottom: -8px;
}

p.blog-desc {
    margin: 0;
    width: 97%;
    padding: 22px 0 21px;
}

.blog-btn a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
	transition: .5s;
}

.blog-btn a i {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-left: 7px;
	transition: .5s;
}

.blog-single-box:hover .blog-thumb img {
    transform: scale(1.1);
}

.blog-single-box:hover h3.blog-title a {
    color: #CD9F51;
}

.blog-single-box:hover .blog-btn a i{
    color: #C6974F;
}

.blog-single-box:hover .blog-btn a{
	color: #C6974F;
}









/*=====================================
<--  end dreamhub blog area Css -->
=======================================*/




/*=====================================
<--  start dreamhub footer area Css -->
=======================================*/



.footer-area {
    background: #070707;
    padding: 117px 0 97px;
}

.footer-widget-text p {
    font-size: 16px;
    line-height: 30px;
    color: #919191;
    font-weight: 400;
    width: 86%;
    margin: 0;
    padding: 24px 0 30px;
}

.footer-widget-social a i {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    margin-right: 12px;
    transition: .5s;
}

.widget-title h2 {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    font-family: "Gilda Display";
    margin-bottom: 37px;
}

.footer-widget.left {
    padding-left: 30px;
}

.footer-widget.left ul {
    padding: 0;
}

.footer-widget.left ul li {
    list-style: none;
}

.footer-widget.left ul li a {
    font-size: 16px;
    color: #919191;
    font-weight: 400;
    display: inline-block;
    text-decoration: none;
    padding-bottom: 10px;
}

.footer-widget.left ul li a i {
    display: inline-block;
    background: #2C2C2C;
    color: #CD9D51;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    margin-right: 11px;
}

.form-field input {
    background: #202020;
    outline: 0;
    border: none;
    height: 54px;
    width: 62%;
    padding: 0 5px 3px 20px;
    font-weight: 500;
    opacity: 0.5;
    color: #fff;
    margin-bottom: 20px;
}

.form-field button {
    background: #322E25;
    outline: 0;
    border: none;
    color: #fff;
    padding: 13px 18px 17px;
    font-size: 18px;
    margin-left: -4px;
}

.footer-widget-right-desc p {
    width: 71%;
}

.footer-widget-social a i:hover {
    color: #CD9D51;
}

/*=====================================
<--  end dreamhub footer area Css -->
=======================================*/



/*=====================================
<--  start dreamhub copyright Css -->
=======================================*/




.copyright-area {
    background: #070707;
    border-top: 1px solid #1A1A1A;
    padding: 19px 0 0;
}

.footer-copyright-text {
    text-align: center;
}

.footer-copyright-text p {
    font-size: 16px;
    font-weight: 400;
    color: #919191;
    margin: 0;
    padding: 0 0 15px;
}


/*=====================================
<--  end dreamhub copyright Css -->
=======================================*/






/*=====================================
<--  start dreamhub breatcome-area Css -->
=======================================*/


.breatcome-area {
    background: url(../image/breatcome-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
}

.breatcome-area-contact {
    background: url(../image/contact-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
}


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

.breatcome-title h1 {
    font-size: 60px;
    font-weight: 600;
    color: #fff;
}

.breatcome-text ul {
    padding: 0;
}

.breatcome-text ul li {
    list-style: none;
    display: inline-block;
}

.breatcome-text ul li a {
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    transition: .5s;
}

.breatcome-text ul li {
    list-style: none;
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.breatcome-text ul li a:hover {
    color: #CE9F51;
}




/*=====================================
<--  end dreamhub breatcome-area Css -->
=======================================*/







/*=====================================
<--  start dreamhub service-details-area Css -->
=======================================*/


.service-details-area {
    padding: 118px 0 118px;
}

.service-details-thumb {
    overflow: hidden;
}

.service-details-thumb img {
    width: 100%;
    transform: scale(1);
    transition: .5s;
}

.service-details-content {
    margin-bottom: 50px;
}

h4.service-details-title {
    text-align: center;
}

h4.service-details-title a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 26px;
    background: #070707;
    width: 100%;
    color: #fff;
    padding: 19px 0 21px;
    margin: 36px 0 10px;
    position: relative;
    z-index: 1;
}

h4.service-details-title a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 2%;
    background: #CE9F51;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
}

.service-details-btn a {
    display: inline-block;
    text-decoration: none;
    background: #CE9F51;
    color: #fff;
    padding: 12px 37px 14px;
    font-size: 17px;
    position: relative;
    z-index: 1;
    margin-top: 7px;
}

.service-details-btn a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #070707;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: .5s;
}

.service-details-box {
    margin-bottom: 43px;
}

.service-details-icon img {
    width: 30%;
}

h3.service-details-title {
    font-size: 22px;
    color: #000;
    font-weight: 400;
    margin: 0;
    padding: 19px 0 9px;
}

.service-details-thumb.two {
    margin-bottom: 34px;
    overflow: hidden;
}

.service-details-thumb.two img {
    width: 100%;
    transform: scale(1);
    transition: .5s;
}

h2.service-details-title {
    text-align: center;
}

h2.service-details-title a {
    display: inline-block;
    text-decoration: none;
    background: #070707;
    width: 100%;
    color: #fff;
    font-size: 26px;
    padding: 19px 0 20px;
    position: relative;
    z-index: 1;
}

h2.service-details-title a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 3%;
    background: #CE9F51;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
}

.service-details-desc3 {
    padding: 11px 0 15px;
}

.side_bar {
    padding-left: 15px;
}

.side_bar h4 {
    margin-top: 0;
    padding: 0 15px 0;
    font-weight: 600;
    font-size: 18px;
    border-left: solid #CE9F51 5px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.side_bar_blog {
    margin-bottom: 30px;
    float: left;
    width: 100%;
    padding: 0;
    background: #f9f9f9;
    padding: 30px;
}

.side_bar_blog p {
    margin: 10px 0 0;
    float: left;
    width: 100%;
}

.post_head {
    font-weight: 500;
    margin: 0;
}

.post_head a {
    color: #000;
    display: inline-block;
    text-decoration: none;
}

.post_date {
	margin-top: 5px;
	font-size: 14px;
}

.post_date i {
    position: relative;
    top: 0px;
    font-size: 13px;
    margin-right: 3px;
}

.recent_post ul {
    padding: 0;
}

.recent_post li {
    margin-bottom: 20PX;
    list-style: none;
}

.categary {
	font-size: 15px;
}

.categary a {
    color: #333;
    transition: ease all 0.5s;
    text-decoration: none;
    font-weight: 500;
}

.categary a i {
	margin-right: 2px;
}

.categary ul {
    padding: 0;
    margin: 0;
}

.categary li {
    transition: ease all 0.5s;
    padding: 6px 23px;
    font-weight: 400;
    font-size: 14px;
    list-style: none;
}

.categary li:hover, 
.categary li:focus {
    padding-left: 30px;
    background: #CE9F51;
}

.categary li:hover a,
.categary li:focus a {
	color: #fff;
}

.tags a {
	border: solid 1px #e1e1e1;
	border-radius: 50px;
	padding: 0 18px;
	float: left;
	min-height: 50px;
	line-height: 50px;
	text-decoration: none;
	color: #000;
	transition: .5s;
	display: inline-block;
}

.tags a:hover,
.tags a:focus {
	color: #fff !important;
	background: #CE9F51;
}

.tags ul {
    padding: 0;
}

.tags li {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
    list-style: none;
}


/**== Sidebar Search ==**/

.side_bar_search {
	padding-top: 10px;
}

.side_bar_blog .input-group {	
    background: #fff;
    width: 100%;
    border-radius: 50px;
    height: 50px;
    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
}

.product_catery .row.margin_bottom_20_all {
	float: left;
	width: 100%;
}

.side_bar_blog .input-group input.form-control {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 15px 20px;
	height: auto;
	font-size: 14px;
}

.side_bar_blog .input-group span.input-group-addon {
	border: none;
	background: transparent;
	padding: 10px 20px;
}

.side_bar_blog .input-group span.input-group-addon button {
	background: transparent;
	border: none;
	font-size: 15px;
	color: #000000;
	top: 3px;
	position: relative;
}



.service-details-thumb img:hover {
    transform: scale(1.1);
}

.service-details-box2:hover .service-details-thumb.two img{
    transform: scale(1.1);
}

.service-details-box2:hover h2.service-details-title a::before {
    width: 100%;
}

.service-details-btn a:hover::before {
    opacity: 1;
    transform: scale(1);
}

h4.service-details-title a:hover::before {
    width: 100%;
}


/*=====================================
<--  end dreamhub service-details-area Css -->
=======================================*/











/*=====================================
<--  start dreamhub blog-details-area Css -->
=======================================*/

.blog-details-area {
    padding: 107px 0 108px;
}

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

.blog-meta span {
    margin-right: 40px;
    -webkit-transition: .3s;
    transition: .3s;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    text-transform: capitalize;
    color: #646464;
    position: relative;
    font-weight: 400;
    padding: 18px 0 10px;
}

.blog-meta span::before {
    content: "";
    background: #CD9E50;
    width: 8px;
    height: 8px;
    position: absolute;
    right: -28px;
    top: 27px;
    border-radius: 50%;
}

.blog-meta a {
    margin-right: 0;
    -webkit-transition: .3s;
    transition: .3s;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    text-transform: capitalize;
    color: #646464;
    position: relative;
    font-weight: 400;
}

.single-blog.blog-grid {
    margin: 0 0 30px 0;
    box-shadow: none;
}

.blog-details-inner h3 {
    font-size: 26px;
    margin: 17px 0 13px 0;
    text-transform: lowercase;
    color: #222;
}
.blog-dtls-desc {
    border-left: 4px solid #CD9E50;
    background: 0 0;
    position: relative;
    background-color: #F9F9F9;
    padding: 24px 39px 24px 37px;
    margin: 0 0 31px 0;
}

.blog-dtls-desc p {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 7px;
    color: #282828;
}

.blog-details-social-icon {
    padding-top: 30px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    text-align: left;
    margin: 23px 0 18px;
}

.blog-details-social-icon a i {
    border: 1px solid #e6e6e6;
    color: #CD9E50;
    display: inline-block;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    margin: 0 9px 0 0;
    text-align: center;
    width: 40px;
    border-radius: 5px;
    transition: 0.5s;
}

button i {
    font-size: 15px;
    padding-left: 4px;
    font-weight: 400;
}

h2.widget-title {
    color: #222;
    font-size: 26px;
    margin-bottom: 24px;
}

.input-box {
    margin-bottom: 15px;
}

.input-box input {
    width: 100%;
    height: 54px;
    border: transparent;
    border: 1px solid #e6e6e6;
    background: #fff;
	box-shadow:none;
    padding: 6px 20px;
    outline: none;
    color: #495057;
    border-radius: 5px;
    transition: 0.3s;
}

.input-box textarea {
    width: 100%;
    height: 176px;
    border: transparent;
    border: 1px solid #e6e6e6;
    background: #fff;
	box-shadow:none;
    padding: 6px 20px;
    color: #495057;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
}

.contact-area .input-button {
    text-align: center;
}

.contact-area .input-button {
    padding-bottom: 25px;
}

.input-button button {
    display: inline-block;
    padding: 14px 39px;
    text-align: center;
    border: transparent;
    border-radius: 7px;
    font-weight: 400;
    background: #CD9E50;
    color: #fff;
    transition: 0.5s;
    width: 100%;
}

.input-box ::placeholder{
	color:#7B838A;
	font-weight:500;
    font-family: 'Poppins', sans-serif;
}

.input-box input:focus {
    color: #495057;
    outline: 0;
    background-color: rgba(255,255,255,0.7);
    border-color: #CD9E50!important;
    box-shadow: none;
}

.input-box textarea:focus {
    background-color: rgba(255,255,255,0.7);
    border-color: #CD9E50!important;
    box-shadow: none;
}

.blog-details-social-icon a i:hover {
    background: #CD9E50;
    color: #fff;
}

.contact-social-icon a:hover {
    background-color: #FFFFFF;
	color:#007bff;
}

/*=====================================
<--  end dreamhub blog-details-area Css -->
=======================================*/








/*=====================================
<--  start dreamhub shop-area Css -->
=======================================*/

.shop-area {
    padding: 120px 0 88px;
}

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

.shop-thumb img {
    width: 100%;
    border: 1px solid #ddd;
	transition: .5s;
}

.shop-content {
    text-align: center;
    background: #070707;
    padding: 21px 0 22px;
}

.shop-title h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

.shop-rating {
    opacity: 0;
    transition: .5s;
}

.shop-rating ul {
    padding: 0;
    margin: 0;
}

.shop-rating ul li {
    display: inline-block;
    list-style: none;
}

.shop-rating ul li i {
    display: inline-block;
    color: #CE9F51;
    font-size: 14px;
    letter-spacing: -2px;
}

.shop-price {
    margin-top: -22px;
    transition: .5s;
}

span.old-price {
    color: #999;
    font-size: 15px;
    text-decoration: line-through;
}

span.new-price {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    margin-left: 5px;
}

.shop-single-box:hover .shop-thumb img {
    border-top: 1px solid #070707;
}

.shop-single-box:hover .shop-thumb img {
    border-left: 1px solid #070707;
}

.shop-single-box:hover .shop-thumb img {
    border-right: 1px solid #070707;
}

.shop-single-box:hover .shop-rating {
    opacity: 1;
}

.shop-single-box:hover .shop-price{
    margin-top: 0;
}


/*=====================================
<--  end dreamhub shop-area Css -->
=======================================*/






/*--==============================================->
  <!--Start products & details section Css-->
 ==================================================-*/
 
.products-detials.style-two {
    padding: 115px 0 90px;
}

/*products detials box*/

.products-details-single-box {
    margin-bottom: 35px;
    overflow: hidden;
}
.products-thumbs {
    float: left;
    margin-right: 30px;
    position: relative;
    z-index: 1;
}
.products-thumbs:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 100%, 100% 0%, 100% 100%);
    transform: scale(0);
    transform-origin: bottom right;
    background-image: linear-gradient(95deg, #696d49 100%, rgba(105,109,73,0) 100%);
    pointer-events: none;
    transition: all 500ms linear;
    border-radius: 5px;
    opacity: .5;
}
.products-thumbs:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    clip-path: polygon(0 0, 100% 0%, 0% 100%);
    transform: scale(0);
    transform-origin: top left;
    background-image: linear-gradient(95deg, #696d49 100%, rgba(105,109,73,0) 100%);
    pointer-events: none;
    transition: all 500ms linear;
    border-radius: 5px;
    opacity: .5;
}
.products-thumbs:hover:before {
    transform: scale(1);
}
.products-thumbs:hover:after {
    transform: scale(1);
}
/*products contact*/
.products-content1 {
    text-align: left;
}
.products-title h6 {
    color: #696D49;
    font-size: 20px;
    font-weight: 400;
}
.products-details-single-box .products-title h6 span {
    color: #000;
    text-decoration: line-through;
    margin-left: 10px;
    transition: .5s;
    display: inline-block;
}
.products-description p {
    padding: 15px 0 15px;
}
.products-details-single-box .products-social-list {
    display: inline-block;
    transition: .5s;
}
.products-social-list ul li {
    display: inline-block;
    list-style: none;
}
.products-social-list ul li a {
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
    background-color: #fff;
    color: #696D49;
    border: 1px solid #696D49;
    display: inline-block;
    margin-right: 10px;
    transition: .5s;
    position: relative;
    z-index: 1;
}
.products-social-list ul li a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #6a6e49;
    transform: scale(0);
    transition: .5s;
}
.products-social-list ul li a:hover:before {
    transform: scale(1);
}
.products-social-list ul li:hover a {
    color: #fff;
}

/*populat search*/
.popular-search {
    display: inline-block;
    padding: 5px 0 41px;
}
.popular input {
    padding: 11px 15px;
}
.popular_menu {
    display: inline-block;
}
.popular_menu select {
    padding: 15px 13px;
    width: 85%;
    display: inline-block;
    position: relative;
    top: -6px;
    color: #6A6E49;
}


/*tab 
<!-- ============================================= -->*/


.tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: right;
    padding: 5px 0 0;
}
.active {
    z-index: 1;
    display: block;
    visibility: visible;
}
ul.tabs {
    display: inline-block;
    padding-bottom: 35px;
}
.tabs li {
    list-style: none;
    display: inline-block;
}
.tabs li a {
    font-size: 35px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background-color: #CE9F51;
    border: 1px solid #777777;
    display: inline-block;
    margin-left: 10px;
}

/*tabs item*/
.tabs_item {
    display: none;
    padding: 0 0 30px;
    position: relative;
}
.tabs_item:first-child {
    display: block;
}
li.current a {
    color: #fff !important;
    background: #000;
}
ul.tabs.active {
    padding: 0 18px 0 0;
}
ul.tabs-inner-list {
    margin-top: 15px;
}
ul.tabs-inner-list li {
    display: inline-block;
    margin: 3px 0;
}
ul.tabs-inner-list li i {
    display: inline-block;
    margin-right: 12px;
    color: #FF3C00;
    font-size: 15px;
}

/*Tab Style two*/
.style-three.tab .tabs li a {
    padding: 10px;
    background-color: inherit;
    border: 1px solid #ddd;
    display: inline-block;
    margin-left: 7px;
    width: inherit;
    height: inherit;
}
.tabs_item img {
    width: 100%;
    border: 1px solid #ddd;
}
.style-three.tab .tabs li.current a {
    border: 1px solid #ddd;
	transition: .5s;
}

.style-three.tab .tabs li.current a:hover {
    border: 1px solid #CE9F51;
}


/*apointment*/
.appoinment-tab .tab {
	text-align: left;
	padding: 40px 0 0;
}
.appoinment-tab .tabs li {
    margin-right: 12px;
}
.appoinment-tab .tabs li a {
    font-size: 18px;
    outline: none;
    padding: 2px 15px;
    border: 2px solid;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-left: 0;
    border-radius: 5px;
    text-decoration: none;
}


/*tabs items table*/
table.tab-items-table {
    border-bottom: 1px solid #e7e7e7;
    border-top: 1px solid #e7e7e7;
}
table.tab-items-table tr {
    background: #fff;
    height: 66px;
    border-radius: 4px;
    width: 100%;
    display: inline-block;
    padding: 20px 0 0 30px;
}
tr.tabs-bg {
    background: #F5F5F5 !important;
}
table.tab-items-table tr td {
    padding-right: 100px;
}
table.tab-items-table td.table-title {
    font-size: 16px;
    color: #0D0E14;
    font-weight: 500;
}
table.tab-items-table td.table-text {
    color: #0D0E14;
}
 table.tab-items-table td.table-text i {
    color: #6a6e49 !important;
    margin-left: 10px !important;
}
/*product detials post comment box*/
.blog-details-comments-box {
    padding: 30px 0 20px;
}
.post-comment {
    border: 1px solid #e5e5e5;
    padding: 30px 30px 25px;
    margin-top: 30px;
}

.post-comment2 {
    border: 1px solid #e5e5e5;
    padding: 30px 30px 25px;
}

.blog-content-2 {
    overflow: hidden;
}

.post-comment-thumb {
    float: left;
    margin-right: 20px;
}
/*comment icon list*/
.comment-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #6a6e49;
    letter-spacing: .4em;
    font-size: 15px;
}

.comment-icon-list i {
    display: inline-block;
    color: #CE9F51;
}
/*post title*/
.post-title h4 {
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    margin-top: 0;
    padding: 2px 0 9px;
}
.post-title span {
    padding-left: 31px;
    font-size: 15px;
    color: #616161;
    font-weight: 400;
    position: relative;
}
.post-title span:before {
    position: absolute;
    content: "";
    left: 6px;
    top: 9px;
    height: 1px;
    width: 15px;
    background: #0D0E14;
}
/*right reply*/
span.rights-reply {
    float: right;
    font-weight: 500;
    color: #0D0E14;
    position: relative;
    top: -108px;
    cursor: pointer;
    left: 0;
}

.appoinment-tab span.rights-reply {
    left: -385px;
}
.posts-reply span i {
    display: inline-block;
    margin-right: 5px;
}
/*sidebar title*/
.product-details-respond {
    padding: 35px 0 0;
}

.product-details-respond .widget-comments-title h2 {
    font-size: 20px;
    padding: 20px 0 40px;
}

.sidebar-title h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}
/*sidebar desc*/
.sidebar-description p {
    font-size: 15px;
    margin: 10px 0 27px;
}

.sidebar-rating-list i {
    display: inline-block;
    color: #CD9E50;
}

/*sidebar rating list*/
p.sidebar-text {
    color: #0D0E14;
    display: inline-block;
}
.sidebar-rating-list ul {
    display: inline-block;
    padding-left: 30px;
}
.sidebar-rating-list ul li {
    list-style: none;
    display: inline-block;
    color: #6a6e49;
    letter-spacing: .4em;
    font-size: 15px;
}
/*from box*/
p.form_text {
    color: #000;
    margin-bottom: 10px;
    padding: 10px 0 0;
}

.form-box input {
    height: 56px;
    background-color: #F7F7FB;
    border: 0;
    transition: .5s;
    padding: 0px 25px;
    display: block;
    width: 100%;
    color: #0D0E14;
    margin-bottom: 30px;
    border-radius: 4px;
}

.from-box input::placeholder {
    color: #000;
    opacity: .6;
}

.form-box textarea {
    height: 170px;
    background-color: #fff;
    border: 1px solid #6A6E49;
    transition: .5s;
    padding: 15px 25px;
    display: block;
    width: 100%;
    border-radius: 4px;
}

.from-box textarea::placeholder {
    color: #0D0E14;
    opacity: .6;
}

.product-item-title h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 42px;
    padding: 20px 0 40px;
    color: #202124;
}

/*contact form button*/
.contact-form button {
    padding: 11px 53px;
    color: #fff;
    display: inline-block;
    margin-top: 40px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
    background: #CE9F51;
    transition: 0.5s;
    font-weight: 500;
}
.contact-form button i {
    padding-left: 6px;
    position: relative;
    top: 2px;
}
.contact-form button:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: -1;
    transition: 0.5s;
    transform: scale(0.0, 1);
    opacity: 0;
}

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

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



/*----------------
==============   Start Dreamhub products Details
------------------*/

.shop-details-content {
    margin: 84px 0 0;
}

.category-title h2 {
    font-size: 35px;
    font-weight: 600;
    line-height: 26px;
    padding: 0px 0 23px;
    color: #202124;
}

.category-icon-list ul {
    padding: 0;
}

.category-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #CE9F51;
    letter-spacing: .4em;
    font-size: 15px;
}
li.category-text {
    letter-spacing: 0 !important;
    font-size: 16px !important;
    color: #67686C!important;
    padding-left: 6px;
}
/*price*/
.category-price h1 {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #696D49;
    font-family: 'Montserrat', sans-serif;
}
.category-price span {
    color: #A1A1A1;
    padding-left: 7px;
    text-decoration: line-through;
}
/*categories desc*/
.category-description p {
    padding: 19px 0 2px;
}

.category-color p {
    color: #0D0E14;
    line-height: 26px;
    font-weight: 500;
}
.category-color span {
    color: #67686C;
    padding-left: 20px;
    position: relative;
}
.category-color span:before {
    position: absolute;
    content: ":";
    left: 4px;
    top: -3px;
}
/* --- Quantity button--- */
.category-count-button {
    display: inline-flex;
    padding: 8px 0 30px;
}
.quantity-with_btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
}
.quantity .cart-plus-minus {
    position: relative;
    width: 170px;
    text-align: left;
    height: 56px;
    overflow: hidden;
    border-radius: 5px;
}
.quantity .cart-plus-minus > .ctnbutton {
    cursor: pointer;
    position: absolute;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    width: 38px;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    -webkit-transition: .5s;
    background: #CE9F51;
}

.quantity .cart-plus-minus > .cart-plus-minus-box {
    border: 1px dashed #6A6E49;
    height: 56px;
    text-align: center;
    width: 170px;
    background: #ffffff;
    font-size: 16px;
    font-weight: 600;
}
.quantity .cart-plus-minus > .ctnbutton.dec {
    top: 50%;
    left: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: center;
    height: 100%;
    border-radius: 0 30px 30px 0;
}
.quantity .cart-plus-minus > .ctnbutton.inc {
    top: 50%;
    right: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    height: 100%;
    border-radius: 30px 0 0 30px;
}

/*categories button*/
.category-button {
    display: inline-block;
    padding-left: 20px;
}
.category-button a {
    padding: 14px 35px;
    font-size: 17px;
    font-weight: 500;
    background: #CE9F51;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.category-button a:before {
    position: absolute;
    z-index: -1;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: #000;
    border-radius: 4px;
    transition: .5s;
}
.category-button a:hover:before {
    left: 0;
    width: 100%;
}

/*table*/
table.category-table td.table-title {
    font-size: 16px;
    color: #0D0E14;
    font-weight: 500;
}
table.category-table tr td {
    padding-right: 25px;
    padding-bottom: 12px;
}
table.category-table td.table-title {
    font-size: 16px;
    color: #0D0E14;
    font-weight: 500;
}
table.category-table td.table-text {
    color: #67686C;
    position: relative;
    z-index: 1;
}
table.category-table td.table-text:before {
    position: absolute;
    content: ":";
    left: -15px;
    top: 0;
    font-size: 20px;
    color: #0D0E14;
}
/*products details*/

.products-social-icon-list ul {
    padding: 0;
}

.products-social-icon-list ul li {
    display: inline-block;
    list-style: none;
    padding: 12px 3px 0;
}
.products-social-icon-list ul li strong {
    color: #000;
    margin-right: 5px;
}
.products-social-icon-list ul li a {
    color: #CE9F51;
    letter-spacing: 8px;
    transition: .5s;
}
/*----------------
==============   Start dreamhub products Nav Sidebar button
------------------*/





/**=======================================
<-- Start dreamhum products Bestseller Css -->
=========================================**/
.bestseller-section {
    padding: 190px 0 170px;
}
.dreamit-bestseller-single-box {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 0 27px;
}
/*bestseller thumb*/
.bestseller-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.bestseller-thumb img {
    width: 100%;
    border: 1px solid #ddd;
}
/*thumb icon*/
.bestseller-thumb-icon {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    opacity: 0; 
}

.bestseller-thumb-icon  ul li {
    display: inline-block;
    margin-right: 3px;
    list-style: none;
}
.bestseller-thumb-icon ul li:nth-child(1) a {
    transition-delay: 0.1s;
}
.bestseller-thumb-icon ul li:nth-child(2) a{
    transition-delay: 0.3s;
}
.bestseller-thumb-icon ul li:nth-child(3) a {
    transition-delay: 0.4s;
}
.bestseller-thumb-icon ul li:nth-child(4) a {
    transition-delay: 0.6s;
}
.bestseller-thumb-icon ul li a {
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
    filter: drop-shadow(0 0 25px rgba(224,224,224,0.09));
    background-color: #ffffff;
    display: inline-block;
    transition-delay: .5s;
    overflow: hidden;
    transform: translateY(-100px);
    opacity: 0;
    position: relative;
    z-index: 1;
    color: #000;
}
.bestseller-thumb-icon ul li a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #CE9F51;
    transform: scale(0);
    transition: .5s;
}
.bestseller-thumb-icon ul li a i {
    transition: .5s;
    color: #000;
}
/*bestseller title*/

.bestseller-title h2 a {
    font-size: 22px;
    padding: 20px 0 12px;
    color: #000;
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
}
/*price box*/
.price-box {
    position: relative;
    z-index: 1;
}
span.regular-price {
    color: #000;
    font-weight: 500;
    font-family: 'Playfair Display';
    transition: .5s;
}
span.add-cart a {
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    display: -webkit-box;
    display: flex;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -20px;
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
    color: #000;
    font-weight: 500;
    font-family: 'Playfair Display';
}

/*all bestseller hover*/
.dreamit-bestseller-single-box:hover .bestseller-thumb .bestseller-thumb-icon {
    bottom: 11px;
    opacity: 1;
}
.dreamit-bestseller-single-box:hover .bestseller-thumb-icon ul li a {
    opacity: 1;
    transform: translateY(0px);
    overflow: hidden;
    visibility: visible;
}
.bestseller-thumb-icon ul li a:hover i {
    color:#fff;
}
.bestseller-thumb-icon ul li a:hover:before {
    transform: scale(1);
}
.dreamit-bestseller-single-box:hover {
    filter: drop-shadow(0px 7px 9px rgba(227,227,227,0.18));
    background-color: #ffffff;
}
.dreamit-bestseller-single-box span.add-cart a:hover {
    color: #696D49;
}
.dreamit-bestseller-single-box:hover span.add-cart a {
    opacity: 1;
    bottom: 0;
    visibility: visible;
    transition: .5s;
}
.dreamit-bestseller-single-box:hover span.regular-price {
    visibility: hidden;
    opacity: 0;
}
/*style two bestseller section*/
.style-two.popular-section {
    padding: 0px 0 50px;
}
.style-two .bestseller-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-radius: 5px;
    background-image: linear-gradient(95deg, #CE9F51 100%, rgba(105,109,73,0) 100%);
    opacity: 0;
    transition: .5s;
}
.style-two .bestseller-thumb-icon {
    bottom: inherit;
    top: 20px;
    right: 18px;
    left: inherit;
}
.style-two .bestseller-thumb-icon  ul li {
    display: block;
}
.style-two .bestseller-thumb-icon  ul li a.active {
    background: #CE9F51!important;
    color: #fff;
    transition: .5s;
}
.products-title h4 a {
    color: #000;
}
.style-two .bestseller-title p {
    color: #6D6F4A;
    font-weight: 500;
    font-family: 'Montserrat';
    line-height: 26px;
    padding: 9px 0 3px;
    margin-bottom: 0;
}
/*all hover*/
.style-two .bestseller-thumb:hover:before {
	opacity: 0.45;
	top: 0;
	height: 100%;
}

/*style two upper popular section*/
.upper.style-two.popular-section {
    padding: 75px 0 100px;
}
.icon a {
    position: relative;
    z-index: 1;
}

/*--==============================================->
  <!--end products & details section Css-->
 ==================================================-*/
 



/*--==============================================->
  <!--Start team-area Css-->
 ==================================================-*/
 

.team-area {
    padding: 118px 0 84px;
}

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

.team-thumb {
    position: relative;
    overflow: hidden;
}
.team-thumb img {
    width: 100%;
    border-radius: 0 50px 0 0;
}

.team-thumb::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 0%;
    background: #070707;
    border-radius: 0 50px 0 0;
    opacity: 0;
    transition: .5s;
}


.team-social-icon ul {
    padding: 0;
	margin: 0;
}

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

.team-social-icon {
    position: absolute;
    bottom: -16%;
    left: 0;
    right: 0;
    justify-content: center;
    display: flex;
    opacity: 0;
    transition: .5s;
}

.team-social-icon ul li a i {
    display: inline-block;
    color: #fff;
    background: #070707;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-left: 6px;
    position: relative;
    z-index: 1;
}

.team-social-icon ul li a i:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #CE9E51;
    left: 0;
    top: 0;
    border-radius: 50%;
    z-index: -1;
    transform: scale(0);
    opacity: 0;
    transition: .5s;
}

.team-content {
    background: #f2eeeb;
    text-align: center;
    border-radius: 0 0 0 50px;
    padding: 21px 0 23px;
    position: relative;
    z-index: 1;
}

.team-content::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 0%;
    background: #CE9E51;
    right: 0;
    top: 0;
    z-index: -1;
    border-radius: 0 0 0 50px;
    opacity: 0;
    transition: .5s;
}

span.team-text {
    color: #CE9F51;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 5px;
    display: inline-block;
	transition: .5s;
}

h3.team-title {
    font-size: 22px;
    color: #111111;
    font-weight: 600;
    margin: 0;
	transition: .5s;
}

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

.team-social-icon ul li a i:hover:after {
    opacity: 1;
    transform: scale(1.1);
}

.team-single-box:hover .team-social-icon {
    opacity: 1;
    bottom: 10%;
}

.team-single-box:hover .team-content::before {
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.team-single-box:hover span.team-text  {
    color: #fff;
}

.team-single-box:hover h3.team-title {
    color: #fff;
}


/*--==============================================->
  <!--end team-area Css-->
 ==================================================-*/
 
 

/*--==============================================->
  <!--star service-area Css-->
 ==================================================-*/
 
 
.service-area {
    padding: 120px 0 90px;
}

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

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

.service-thumb::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 100%;
    background: #070707;
    bottom: 0;
    transition: .5s;
    opacity: 0;
}

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

.service-btn {
    position: absolute;
    bottom: -70px;
    justify-content: center;
    display: flex;
    left: 0;
    right: 0;
    transition: .5s;
	opacity: 0;
}

.service-btn a {
    display: inline-block;
    text-decoration: none;
    background: #CE9F51;
    color: #ffff;
    padding: 7px 24px 6px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.service-btn a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #070707;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: .5s;
}

.service-content {
    background: #fff;
    box-shadow: 0 10px 20px 0 rgba(50, 50, 50, 0.12);
    padding: 24px 22px 10px;
}

.service-icon {
    float: left;
    margin: 6px 22px 0 0;
}

h3.service-title {
    font-size: 19px;
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
}



.service-btn a:hover:before {
    opacity: 1;
    transform: scale(1.1);
}

.service-single-box:hover .service-thumb::before {
    opacity: .3;
    height: 100%;
}

.service-single-box:hover .service-btn {
    bottom: 44%;
    opacity: 1;
}


/*--==============================================->
  <!--end service-area Css-->
 ==================================================-*/
 




/*--==============================================->
  <!--star about-area Css-->
 ==================================================-*/
 

.about-area {
    padding: 118px 0 118px;
}

h3.about-title {
    font-size: 20px;
    color: #CE9E51;
    font-weight: 500;
    margin: 0;
    padding: 13px 0 9px;
}

.about-thumb {
    margin-left: 35px;
}

.about-thumb img {
    border-radius: 5px;
}




/*--==============================================->
  <!--end about-area Css-->
 ==================================================-*/
 






/*===================================
<-- star-contact-us-area Css -->
=====================================*/

.contact-area {
    padding: 118px 0 118px;
}

.contact-us .appoinment-title {
    text-align: left;
}

.contact-us .input-box {
    width: 40%;
    float: left;
    margin: 8px 15px;
    background: #fff;
}

.contact-us .appoinment-title {
    margin: 0 15px;
}

.contact-us .input-box.textarea {
    width: 85%;
}

.contact-us .ap-submit-btn {
    width: 30%;
    float: left;
    margin: 15px;
}

.appointment-content {
    height: 100%;
}

.appointment-content .appointment-form {
    height: 100% !important;
    padding: 0 0 0 40px;
}

.cda-icon i {
    font-size: 35px;
    color: #282828;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    background: #E9E7F5;
    border-radius: 5px;
    display: inline-block;
    margin-right: 25px;
    margin-top: 10px;
}

.cda-content-inner h4 {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
}

.cda-content-inner p {
    color: rgba(255, 255, 255, 0.74);
    margin: 10px 0;
}

.cda-content-area {
    background: #070707;
    padding: 59px 0 133px 47px;
}

.cda-single-content {
    margin-top: 34px;
}

.contact-us .appoinment-title h3 {
    margin-bottom: 20px;
    padding-top: 35px;
    font-weight: 500;
}

.contact-us .input-box {
    color: #000;
}

.contact_from_box {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 37px 40px 45px;
}

.contact_title.pb-4 h3 {
    font-size: 30px;
    color: #070707;
}

/*form input*/
.form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    border-radius: 30px;
    color: #232323;
    border: 1px solid rgba(35, 35, 35, 0.12);
    transition: .5s;
    margin-bottom: 30px;
}

.form_box textarea {
    width: 100%;
    padding-left: 25px;
    padding-top: 20px;
    height: 135px;
    border: 1px solid rgba(35, 35, 35, 0.12);
    border-radius: 30px;
    color: #232323;
    transition: .5s;
    margin-bottom: 24px;
}

.form_box input::placeholder {
    color: #6d6d6d;
}

.form_box input:focus,
.form_box textarea:focus {
    border-color: #CE9E51;
    outline: 0;
    
}

/*form button*/
.quote_button button {
    padding: 13px 15px;
    background: #070707;
    display: block;
    color: #fff;
    border-radius: 30px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    transition: .5s;
}

.quote_button button i {
    display: inline-block;
    font-size: 18px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    color: #fff;
    transition: .5s;
}

.quote_button button:hover{
	color: #fff;
}

.map-area iframe {
    height: 455px;
    width: 100%;
}

/*===================================
<-- end-contact-us-area Css -->
=====================================*/


/*===================================
<-- star-faq-area Css -->
=====================================*/

.faq-area {
    padding: 114px 0 118px;
}

.faq-thumb {
    margin-left: 30px;
}

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

/*accordion*/
.tab_container {
    position: relative;
}

ul.accordion {
    padding: 0;
    margin: 0;
}

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

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: #fff !important;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    color: #B1B2B4;
    padding: 25px 0 10px 30px;
    margin: 0;
}

.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;
    transition: all 0.2s ease-in-out;
    background: #fff;
    z-index: -1;
}

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

a.active {
    color: #fff !important;
    background: #070707!important;
}

.accordion li a span {
    position: relative;
    z-index: 1;
    color: #fff;
}

.accordion li a span:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: -35px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(https://html.ditsolution.net/drtheme/dreamhub/images/resource/question.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
}

/*accordion start*/

.faq-sectiions .dreamit-icon-list ul li i {
    width: inherit;
    height: inherit;
    line-height: inherit;
    border-radius: 0;
    background-color: inherit;
    display: inline-block;
    color: #D0A37C;
    font-size: 22px;
    margin-right: 8px;
    position: relative;
    top: 4px;
}

.study-button a i {
    transition: .5s;
}

.study-button a:hover i {
    color: #D0A37C;
}

/* Faq New Style */

.faq-area .accordion li a {
    padding: 16px 20px 16px 30px;
    border-radius: 5px;
    background: #070707;
    text-decoration: none;
}

.faq-area .accordion li a span:after {
    display: none;
}

.faq-area .accordion li p {
    padding: 25px 20px 25px 30px;
    color: #646464;
    box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    background: #fff;
    border-radius: 5px;
    line-height: 28px;
}

/*===================================
<-- end-faq-area Css -->
=====================================*/



/*===================================
<-- star-project-area.style-two Css -->
=====================================*/


.project-area.style-two {
    background: #fff;
}

.project-area.style-two .portfolio_nav ul li {
    color: black;
}

.project-area.style-two.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff !important;
}

/*===================================
<-- end-project-area.style-two Css -->
=====================================*/



/*======================================
<-- Consen Case Study Details Css -->
========================================*/
.case-study-details {
    padding: 120px 0 90px;
}
.case-study-intro {
    box-shadow: 0 0 15px rgb(0,0,0,0.2);
    padding: 60px;
    margin-bottom: 50px;
}
.csd-title h2 {
    color: black;
    margin-bottom: 15px;
}
.csd-thumb img{
  width:100%;
}
.csd-info {
    padding: 0 50px;
}
.csd-info ul li {
  list-style: none;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize;
}
.csd-info ul  {
  padding: 13px 0;

}
.csd-social-icon li{
  display: inline-block;
  margin: 0px 8px 0 0;
}
.csd-social-icon li i {
    color: #fff;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    background: #CE9E51;
    border-radius: 5px;
    transition: .5s;
}
.csd-social-icon li i:hover{
    background: #11102F;
    color: #fff;
}
.csd-title  h3 {
    font-size: 28px;
    font-weight: 600;
    color: black;
}
.csd-info ul li {
    list-style: none;
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: 300;
    text-transform: capitalize;
}
.csd-info strong {
    font-size: 19px;
    font-weight: 600;
    margin-right: 5px;
    color: #232323;
}
.share-text {
    float: left;
    margin-right: 20px;
}
.share-text h4 {
    font-size: 20px;
    color: #666;
    font-weight: 600;
    margin-top: 5px;
}
.csd-social-icon ul {
    padding: 0;
}


/*case study three
======================================================*/
.portfolio-section {
    padding: 130px 0 110px;
}
/* Portfolio Nav */
.portfolio_nav {
    margin: 0 0 51px;
}
.portfolio_menu ul {
    text-align: center;
    list-style: none;
}
.portfolio_nav ul li {
    border: 1px solid #343434;
    font-size: 16px;
    transition: all 0.5s ease 0s;
    cursor: pointer;
    padding: 6px 24px;
    margin-right: 16px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}
.portfolio_menu ul li a{
    display: block;
    color:#fff;
    text-transform:uppercase;
    position:relative;
    transition:.5s;
	margin-bottom:10px;
}
.portfolio_menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 24px;
    height: 2px;
    width: 0%;
    background: #fff;
    transition:.5s;

}

.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff;
    background: #CD9E50;
}
/*nav menu end*/

.case-study-single-box {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    overflow: hidden;
}
 .case-study-thumb {
    position: relative;
    z-index: 1;
}
.case-study-thumb img {
    width: 100%;
    border-radius: 5px;
}
.case-study-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: #CE9E51;
    opacity: .6;
    transition: .5s;
    border-radius: 5px;
}

.case-study-icon a i {
    font-size: 16px;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    top: 0px;
    right: 0;
    left: 0;
    margin: auto;
    background: #CE9E51;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    transition: .5s;
    opacity: 0;
}
/*case stusy content*/
.case-study-content {
    position: absolute;
    bottom: 0px;
    left: 35px;
    right: 0;
    z-index: 1;
    transition: .5s;
    opacity: 0;
}

/*study text*/
.study-text p {
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 1;
}
.study-text p:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -14px;
    background: #fff;
    width: 89%;
    height: 1px;
}
.study-text p:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -14px;
    background: #CE9E51;
    width: 18%;
    height: 1px;
    transition: .7s;
}
.study-title h4 a {
    font-size: 24px;
    color: #fff;
    display: inline-block;
    padding: 15px 0 0;
    transition: .5s;
    text-decoration: none;
}
.case-study-single-box:hover .study-text p:after {
    width: 89%;
}
.case-study-single-box:hover .case-study-thumb:before {
    height: 100%;
    top: 0;
}
.case-study-single-box:hover .case-study-icon a i {
    opacity: 1;
    top: 30px;
}
.case-study-single-box:hover .case-study-content {
    bottom: 30px;
    opacity: 1;
}
/*active*/
.active.center .case-study-thumb:before {
    height: 100%;
    top: 0;
}
.active.center .case-study-icon a i {
    opacity: 1;
    top: 30px;
}
.active.center .case-study-content {
    bottom: 30px;
    opacity: 1;
}






/*=====================================
<--  start dreamhub pricing-Area Css -->
=======================================*/



.pricing-area {
    padding: 113px 0 88px;
}

.pricing-single-box {
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.1));
    background: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
    position: relative;
}

.pricing-shape {
    position: absolute;
    bottom: 0;
    left: 0;
}

h3.pricing-title {
    font-size: 22px;
    color: #CD9E50;
    font-weight: 500;
    margin: 0;
    transition: .5s;
}

.pricing-single-box.active h3.pricing-title{
	color: #fff;
}

.pricing-head {
    background: #1B1B1C;
    padding: 28px 51px 25px;
    border-radius: 5px 5px 0 0;
    position: relative;
    z-index: 1;
}

.pricing-single-box.active .pricing-head {
    background: #CD9E50;
}

.pricing-head::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #CD9E50;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 5px 5px 0 0;
    transform: scale(.2, 1);
    opacity: 0;
    transition: .5s;
}


.pricing-body {
    padding: 36px 49px 44px;
}

h2.pricing-tk {
    display: inline-block;
    color: #14212b;
    font-size: 40px;
    font-weight: 500;
    margin: 0;
}

span.pricing-month {
    color: #14212b;
    font-size: 15px;
    font-weight: 500;
}

.pricing-list {
    padding: 0 0 26px 0;
}

.pricing-list ul {
    padding: 0;
}

.pricing-list ul li {
    list-style: none;
    padding-top: 11px;
    position: relative;
}

.pricing-list ul li i {
    display: inline-block;
    color: #CD9E50;
    padding-right: 10px;
}

.pricing-list ul li::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 36%;
    background: #070707;
    bottom: -2px;
    left: 25px;
}

.pricing-btn a {
    display: inline-block;
    text-decoration: none;
    color: #CD9E50;
    border: 1px solid #CD9E50;
    border-radius: 28px;
    padding: 9px 21px 9px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.pricing-single-box.active .pricing-btn a{
	background: #CD9E50;
	color: #fff;
}

.pricing-btn a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #CD9E50;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 28px;
    opacity: 0;
    transform: scale(0);
    transition: .5s;
}

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

.pricing-single-box:hover .pricing-btn a{
	color: #fff;
}

.pricing-single-box:hover .pricing-head::before {
    opacity: 1;
    transform: scale(1);
}

.pricing-single-box:hover h3.pricing-title{
	color: #fff;
}

/*=====================================
<--  end dreamhub pricing-Area Css -->
=======================================*/



/*=====================================
<--  start dreamhub blog-grid-Area Css -->
=======================================*/

.blog-grid-area {
    padding: 118px 0 83px;
}

.blog-grid-area h3.blog-title a {
    font-weight: 600;
    color: #070707;
}

.blog-grid-area .blog-btn a {
    color: #070707;
}

.blog-grid-area .blog-date h4 {
    background: #CE9E51;
    color: #fff;
}

/*=====================================
<--  end dreamhub blog-grid-Area Css -->
=======================================*/






/*=====================================
<--  start dreamhub blog-list-Area Css -->
=======================================*/

.blog-list-area {
	padding: 118px 0 85px;
}

.blog-list-area h3.blog-title a {
	color: #070707;
	font-weight: 600;
}

.blog-list-area .blog-btn a {
    color: #070707;
}

.blog-list-area .blog-date h4 {
	background: #ce9e51;
	color: #fff;
}


/*=====================================
<--  end dreamhub blog-list-Area Css -->
=======================================*/




/*=====================================
<--  start dreamhub blog-2column-Area Css -->
=======================================*/


.blog-2column-area {
    padding: 118px 0 90px;
}

.blog-2column-area h3.blog-title a {
	color: #070707;
	font-weight: 600;
}

.blog-2column-area .blog-btn a {
    color: #070707;
}

.blog-2column-area .blog-date h4 {
	background: #ce9e51;
	color: #fff;
}




/*=====================================
<--  start dreamhub blog-2column-Area Css -->
=======================================*/










/*** 
====================================================================
    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: #CE214F;
    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: #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;
	outline: 0;
}
.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: #CE214F;
    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: 45px;
    color: #fff;
    display: inline-block;
}
span.flaticon-multiply i {
    display: inline-block;
    color: #CE214F;
}

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









/*
<!-- ============================================================== -->
<!-- dreamhub 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, #CD9E50 0%, #CD9E50 100%);
    background-image: -ms-linear-gradient(0deg, #CD9E50 0%, #CD9E50 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: #CD9E50;
}

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

.top-wrap .go-top-button:hover {
      background-color: #222;
      color: #fff; 
  }
  
.scroll-area.home-two .top-wrap .go-top-button {
    background: #CD9E50;
}
 .scroll-area.home-two .top-wrap .go-top-button::after {
    background-image: -moz-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
    background-image: -webkit-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
}

@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); } }




/*===========================
<-- dreamhub 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: 666;
}

.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: #CE9E51;
    -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: #CE9E51;
    -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: 52%;
    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;
}










<!-- ============================================================== -->
<!-- corporate Bounce Animation Css -->
<!-- ============================================================== -->*/
/* bounce-animate */
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;}
.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
 .bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate-slow {
    animation-name: float-bob5;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }
@-webkit-keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); } }
@-webkit-keyframes float-bob3 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); } }
@-webkit-keyframes float-bob4 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); } }
@-webkit-keyframes float-bob5 {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px); } }
@-webkit-keyframes float-bob6 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); } }   
@-webkit-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 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);
  }
}

@-webkit-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);
  }
}

@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);
  }
}

/*--==============================================->
  <!-- corporate Animation Dance -->
 ==================================================-*/
/**/
.dance3 {
  -webkit-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;
}
@keyframes dance {
  0% {
    -webkit-transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1.2);
  }
}
.dance2 {
  -webkit-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);
  }
}
.watermark-animate {
  -webkit-animation: watermark-animate 8s infinite;
  animation: watermark-animate 8s infinite;
  animation-direction: alternate-reverse;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes watermark-animate {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}



/*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);
  }
}

@media only screen and (max-width:997px){
.yc1200{display:none; visibility:hidden}
.swiper-button-next,.swiper-button-prev{
width:30px;height:30px;
background-size:17px 24px;
display:none; visibility:hidden;
}
}