/*===============================================
Template Name: dreamhub - Fast Food Resturant HTML5 Template
Author:  https://templatemonstar.net/user/DRTheme
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 Slider Area Css
04. dreamhub Breadcumb Area Css
05. dreamhub Featrue Area Css
06. dreamhub Section Title Css
07. dreamhub About Area Css
08. dreamhub Service Area Css
09. dreamhub Service Details Area Css
10. dreamhub Video Area Css
11. dreamhub Why Choose Us Area Css
12. dreamhub Portfolio Area Css 
13. dreamhub Portfolio Details Area Css
14. dreamhub Testimonial Area Css
15. dreamhub Pricing Area Css
16. dreamhub Skill Area Css
17. dreamhub Team Area Css
18. dreamhub Counter Area Css
19. dreamhub Contact Area Css
20. dreamhub Mission Vision Area Css
21. dreamhub Mission Area Css
22. dreamhub Contact Address Area Css
23. dreamhub Blog Area Css
24. dreamhub Blog Details Area Css
25. dreamhub Case Study Area Css
26. dreamhub Faq Area Css
27. dreamhub News Letter Area CSS
28. dreamhub Footer Area CSS
29. dreamhub Scrollup Section
30. dreamhub Search Popup Css
31. dreamhub Loader Css
=======================*/


/*
<!-- ============================================================== -->
<!-- dreamhub Header Area Css -->
<!-- ============================================================== -->*/

.header-area {
  background: #ffffff;
  position: relative;
  z-index: 1;
}
.header-menu {
    text-align: right;
}
.header-menu ul {
    list-style: none;
    display: inline-block;
}
.header-menu ul li {
  display: inline-block;
  margin-left: 28px;
}
.header-menu ul li a {
  display: inline-block;
  color: #232323;
  font-size: 16px;
  font-weight: 500;
  padding: 30px 0;
  text-decoration: none;
  transition: .5s;
}
.header-menu ul li a:hover{
  color: #ffc40f;
}
.header-social-icon {
  display: inline-block;
  text-align: right;
  margin-left: 9px;
}
.header-social-icon ul li {
  margin-left: 16px;
}
.header-social-icon ul li a i {
  font-size: 16px;
  color: #0e0e0e;
}
.header-social-search-icon {
  display: inline-block;
  margin-left: 17px;
}

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

/* sub menu area css */
.header-menu ul .sub-menu {
  background: #fff;
  position: absolute;
  top: 125%;
  border-radius: 5px;
  width: 217px;
  text-align: left;
  margin: 0;
  -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  transition: .5s;
  visibility: hidden;
  border-top: 2px solid #ffc40f;
  opacity: 0;
  z-index: 11;
}
.header-menu ul .sub-menu ul li {
  display: inline-block;
  margin-left: 0;
  width: 100%;
}
.header-menu ul .sub-menu ul li a {
  padding: 12px 20px;
  text-align: left;
  width: 100%;
  display: inline-block;
  visibility: inherit !important;
  color: #232323;
  margin: 0;
}
.header-menu ul .sub-menu ul li a:hover {
  background: #ffc40f !important;
  color: #fff;
}
.header-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 99%;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Hero Area Css -->
<!-- ============================================================== -->*/
.hero-area {
  background: url(assets/images/fondo.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 858px;
  padding: 131px 0 0;
  margin-bottom: -30px;
}
.hero-sub-title h5 {
  font-size: 16px;
 /*  color: #ffffff; */
 color: #000;
  font-weight: 500;
  background: #ffc40f;
  display: inline-block;
  padding: 2px 30px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.hero-main-title h1 {
  font-size: 60px;
  line-height: 58px;
 /* color: #ffffff; */
 color: #000;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero-discription p {
  font-size: 16px;
  line-height: 28px;
  /* color: #ffffff; */
  color: #000;
  font-weight: 400;
}
.hero-btn a {
  display: inline-block;
  font-size: 16px;
  line-height: 28px;
  /* color: #ffffff; */
  color: #000;
  font-weight: 500;
  background: #c07c6f;  /*#ffc40f;*/
  border: 1px solid #ffc40f;
  padding: 12px 30px;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: .5s;
}
.hero-btn a:hover{
  color:#ffc40f ;
}
.hero-btn a::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0,1);
  opacity: 0;
  z-index: -1;
  transition: .5s;
}
.hero-btn a:hover:before{
  opacity: 1;
  transform: scale(1,1);
  background:#ffff;
  border: 1px solid #ffc40f;
  border-radius: 10px;
}
.hero-shape-one {
  position: absolute;
  top: 89px;
  left: 14%;
}
.hero-shape-two {
  position: absolute;
  left: 10%;
  top: 30%;
}
.hero-shape-three {
  position: absolute;
  left: 7%;
  bottom: 46%;
}
.hero-shape-four {
  position: absolute;
  left: 43%;
  bottom: 21%;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Feature Area Css -->
<!-- ============================================================== -->*/
.feature-area {
  padding: 0 0 100px;
}
.feature-single-box {
  text-align: center;
}
.feature-box-thumb img {
  border-radius: 100%;
}
.feature-box-content h4 {
  font-size: 16px;
  color: #232323;
  font-weight: 700;
  padding: 12px 0px 0;
  transition: .5s;
}
.feature-box-content h4:hover{
  color: #ffc40f;
}


/* Section title */
.section-main-title h3 {
  font-size: 36px;
  color: #232323;
  font-weight: 700;
  margin-bottom: 37px;
}
.section-main-title.feature h3 {
  font-size: 16px;
  /* color: #ffffff; */
  color: #000;
  font-weight: 500;
  background: #c07c6f; /*#ffc40f; */
  display: inline-block;
  padding: 15px 27px;
  border-radius: 10px;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Service Area Css -->
<!-- ============================================================== -->*/
.service-area {
  padding: 0 0 100px;
  background: #fdf7ec;
}
.service-single-box {
  background: url(assets/images/servicea.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 17px 40px 48px;
  border-radius: 10px;
}
.service-single-box.two{
  background: url(assets/images/serviceb.png);
  background-size: cover;
}
.service-single-box.three{
  background: url(assets/images/servicec.png);
  background-size: cover;
}
.service-box-content h4 {
  font-size: 36px;
  line-height: 36px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 9px;
}
.service-box-content p {
  font-size: 16px;
  line-height: 25px;
  color: #ffffff;
  font-weight: 400;
  width: 54%;
}
.service-box-content span {
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 500;
}
.service-box-content a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
}

/*
<!-- ============================================================== -->
<!-- dreamhub portfolio Area Css -->
<!-- ============================================================== -->*/
.porfolio-area {
  padding: 100px 0 100px;
}
.portfolio-single-box {
  position: relative;
  margin-bottom: 40px;
}
.portfolio-single-box::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background: rgba(255,202,40,0.459);
    top: 0;
    right: 0;
    bottom: 0;
    transition: .5s;
}
.portfolio-single-box:hover::before{
  width: 100%;
  left: 0;
}
.portfolio-thumb img {
  width: 100%;
}



/*
<!-- ============================================================== -->
<!-- dreamhub Shop Area Css -->
<!-- ============================================================== -->*/
.shop-area {
  padding: 90px 0 100px;
  background: #fdf7ec;
}
.shop-single-box {
  background: #ffffff;
  text-align: center;
  padding: 49px 0px 39px;
}
.shop-title h5 {
  font-size: 22px;
  color: #232323;
  font-weight: 700;
  padding: 17px 0 10px;
}
.shop-rating i {
  color: #ffc40f;
}
.shop-rate {
  padding: 8px 0 32px;
}
.shop-rate span {
  font-size: 16px;
  color: #616161;
  font-weight: 500;
}
.shop-btn a {
  padding: 15px 30px;
  border-radius: 10px;
  border: 2px solid rgba(35,35,35,0.1);
  font-size: 16px;
  line-height: 28px;
  color: #616161;
  font-weight: 500;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.shop-btn a::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0,1);
  opacity: 0;
  z-index: -1;
  transition: .5s;
}
.shop-btn a:hover:before{
  opacity: 1;
  transform: scale(1,1);
  background:#ffc40f;
  border: 2px solid #ffc40f;
  border-radius: 10px;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Menu Area Css -->
<!-- ============================================================== -->*/
.Product-menu-area {
  padding: 100px 0 100px;
}
.Product-menu-single-box {
  margin-bottom: 42px;
}
.Product-menu-thumb {
  float: left;
  margin-right: 12px;
  margin-top: -8px;
  transition: .5s;
}
.Product-menu-single-box:hover .Product-menu-thumb{
  transform: scale(1.1);
}
.Product-menu-content h5 {
  font-size: 22px;
  color: #232323;
  font-weight: 700;
  line-height: 41px;
  transition: .5s;
}
.Product-menu-single-box:hover .Product-menu-content h5{
  color: #ffc40f;
}
.Product-menu-content p {
  font-size: 12px;
  line-height: 18px;
  color: #616161;
  font-weight: 400;
  width: 83%;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Deliver Area Css -->
<!-- ============================================================== -->*/
.deliver-area {
  background: url(assets/images/plato2.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 172px 0 147px;
  position: relative;
}
.deliver-content{
  transform: rotate(-9deg);
}
.deliver-content h1 {
  font-size: 70px;
  line-height: 73px;
  color: #232323;
  font-weight: 700;
  margin-bottom: 13px;
}
.deliver-content p {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  background: #c07c6f; /*ffc40f;*/
  display: inline-block;
  padding: 1px 9px;
  border-radius: 10px;
}
.deliver-shape-one {
  position: absolute;
  top: 32px;
  left: 30px;
}
.deliver-shape-two {
  position: absolute;
  bottom: 7px;
  left: 32px;
}
.deliver-shape-three {
  position: absolute;
  top: 54px;
  right: 65px;
}
.deliver-shape-four {
  position: absolute;
  bottom: 22px;
  right: 29px;
}
.deliver-shape-five {
  position: absolute;
  right: 126px;
  top: 27%;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Team Area Css -->
<!-- ============================================================== -->*/
.team-area {
  padding: 100px 0 100px;
}
.team-single-box{
  overflow: hidden;
  margin-bottom: 40px;
}
.team-thumb {
  position: relative;
}
.team-thumb img {
  width: 100%;
}
.team-social {
  position: absolute;
  left: -81px;
  top: 50%;
  transform: translate(50%, -50%);
  transition: .5s;
}
.team-single-box:hover .team-social{
  left: -4px;
}
.team-social ul {
  list-style: none;
}
.team-social ul li {
  margin: 0 0 12px;
}
.team-social ul li a i {
  height: 50px;
  width: 50px;
  background: #000000;
  color: #ffff;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
  transition: .5s;
}
.team-social ul li a i:hover{
  background:#ffc40f ;
}
.team-contnet {
  text-align: center;
  background: #fdf7ec;
  padding: 12px 0 24px;
  border-radius: 0 0 10px 10px;
  position: relative;
  z-index: 1;
}
.team-contnet::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  background: #ffc40f;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .5s;
  z-index: -1;
}
.team-single-box:hover .team-contnet::before{
  width: 100%;
  left: 0;
  border-radius: 0 0 10px 10px;
}
.team-contnet a {
  text-decoration: none;
}
.team-contnet a h2 {
  font-size: 22px;
  line-height: 43px;
  color: #232323;
  font-weight: 700;
}
.team-contnet span {
  font-size: 16px;
  line-height: 32px;
  color: #ffc40f;
  font-weight: 400;
  transition: .5s;
}
.team-single-box:hover .team-contnet span{
  color: #ffff;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Brand Area Css -->
<!-- ============================================================== -->*/
.brand-area {
  background: #FFF; /*ffc40f; */
  padding: 100px 0 100px;
}

/*
<!-- ============================================================== -->
<!-- dreamhub Testimonial Area Css -->
<!-- ============================================================== -->*/
.testimonila-area {
  padding: 100px 0 100px;
  position: relative;
}
.testimonial-single-box {
  text-align: center;
}
.testimonial-thumb {
  position: relative;
}
.testimonial-icon {
  position: absolute;
  display: inline-block;
  bottom: 10px;
  left: 52%;
}
.testimonial-icon i {
  height: 39px;
  width: 39px;
  line-height: 39px;
  background: #ffc40f;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 23px;
}
.testimonial-content h4 {
  font-size: 22px;
  color: #232323;
  font-weight: 700;
  padding: 10px 0 7px;
}
.testimonial-content span {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
}
.testimonial-content p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  width: 55%;
  margin: auto;
  padding: 7px 0 36px;
}
.testimonial-rating i {
  color: #ffc40f;
  font-size: 14px;
}
.owl-carousel .owl-item img {
  display: inline-block;
}
.testi-shape-one {
  position: absolute;
  top: 21%;
  left: 160px;
}
.testi-shape-two {
  position: absolute;
  bottom: 21%;
  left: 156px;
}
.testi-shape-three {
  position: absolute;
  right: 11%;
  top: 163px;
}
.testi-shape-four {
  position: absolute;
  right: 12%;
  bottom: 72px;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Contact Area Css -->
<!-- ============================================================== -->*/
.contact-area {
  background: #fdf7ec;
}
.contact-box {
  padding: 72px 237px 72px 0;
}
.contact-title h4 {
  font-size: 36px;
  color: #232323;
  font-weight: 700;
  margin-bottom: 20px;
}
.form-box input {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border: 2px solid #d7d3d3;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 0 18px;
}

.form-box input::placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #616161;
  font-weight: 400;
}
.form-box select {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border: 2px solid #d7d3d3;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 0 18px;
}
.contact-form {
  text-align: center;
}
.contact-form button {
  width: 143px;
  height: 52px;
  border-radius: 10px;
  background-color: #ffc40f;
  border: 0;
  font-size: 16px;
  color: #fffbfb;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: .5s;
}
.contact-form button:hover{
  color:#ffc40f ;
}
.contact-form button::before{
  position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: scale(0.0,1);
    opacity: 0;
    z-index: -1;
    transition: .5s;
}
.contact-form button:hover:before{
  opacity: 1;
  transform: scale(1,1);
  background: #fdf7ec;
  border: 1px solid #ffc40f;
  border-radius: 10px;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Footer Area Css -->
<!-- ============================================================== -->*/
.footer-area {
  background: url(assets/images/fondonegro.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0 100px;
}
.footer-wiget-title h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 30px;
}
.footer-wiget-contact-menu ul {
  list-style: none;
}
.footer-wiget-contact-menu ul li {
  font-size: 14px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 400;
  margin: 0 0 15px;
}
.footer-wiget-contact-menu ul li i {
  font-size: 20px;
  margin-right: 13px;
}
.footer-wiget {
  text-align: center;
}
.footer-wiget-log {
  margin-bottom: 32px;
  padding: 16px 0 0;
}
.footer-wiget-text p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 38px;
}
.footer-wiget-social ul {
  list-style: none;
}
.footer-wiget-social ul li {
  display: inline-block;
  margin: 0 3px 0;
}
.footer-wiget-social ul li a i {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #ffffff;
  display: inline-block;
  line-height: 30px;
  color: #ffff;
  transition: .5s;
}
.footer-wiget-social ul li a i:hover{
  background:#ffc40f ;
  border: 1px solid #ffc40f;
}
.footer-wiget.Hours {
  text-align: right;
}
.footer-wiget-work ul {
  list-style: none;
}
.footer-wiget-work ul li {
  font-size: 16px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 400;
}


/*
<!-- ============================================================== -->
<!-- dreamhub Footer Copyright Area Css -->
<!-- ============================================================== -->*/
.copyright-area {
  background: #616b2e; /* #af8401; */
  padding: 27px 0px 20px;
}
.copyright-text p {
  font-size: 16px;
  color: #fffefe;
  font-weight: 400;
}
.add-to-card-thumb {
  text-align: right;
}
.add-to-card-thumb img {
  margin-left: 11px;
}


/*
<!-- ============================================================== -->
<!-- dreamhub ALl Inner Page Css -->
<!-- ============================================================== -->*/


/*
<!-- ============================================================== -->
<!-- dreamhub About Area Inner Page Css -->
<!-- ============================================================== -->*/
.breatcome-area {
  background: url(assets/images/breatcome.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 500px;
}
.bratcome-title h1 {
  font-size: 70px;
  color: #232323;
  font-weight: 700;
}
.breatcome-text ul {
  list-style: none;
}
.breatcome-text ul li {
  display: inline-block;
  margin-right: 15px;
  font-size: 20px;
  color: #616161;
  font-weight: 500;
}
.breatcome-text ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  color: #616161;
  font-weight: 500;
  position: relative;
  transition: .5s;
}
.breatcome-text ul li a:hover{
  color:#ffc40f ;
}
.breatcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 68px;
}

/* Service Style Two */
.service-area.style-two {
  padding: 110px 0 110px;
  background: none;
}
.service-single-box.style-one {
  background: url(assets/images/service3-style2.png);
  background-size: cover;
  background-position: center center;
  padding: 48px 33px 62px;
}
.service-single-box.style-two {
  background: url(assets/images/service2-style2.png);
  padding: 48px 33px 62px;
  background-size: cover;
}
.service-single-box.style-three {
  background: url(assets/images/service1-style2.png);
  padding: 48px 33px 62px;
  background-size: cover;
}
.service-box-content.style-two h4 {
  color: #232323;
 
}
.service-content-btn a {
  display: inline-block;
  font-size: 14px;
  line-height: 28px;
  color: #ffc40f;
  font-weight: 700;
  margin-top: 10px;
}
.service-content-btn a:hover{
  color:#ffff ;
}
.service-content-btn a.active {
  color: #ffff;
}

/* Protfolio Inner Page Css */

.porfolio-area.style-two {
  padding: 90px 0 110px;
}

/* Team inner page Css */

.team-area.style-two {
  padding: 88px 0 110px;
}

/*
<!-- ============================================================== -->
<!-- dreamhub Service  Inner Page Css -->
<!-- ============================================================== -->*/

/* Service inner Page Css */
.service-area-style-three {
  padding: 90px 0 110px;
}
.service-box-three-thumb img {
  width: 100%;
}
.service-box-content-three {
  text-align: center;
  background: #ffff;
  filter: drop-shadow(0px 3px 3.5px rgba(0,0,0,0.35));
  padding: 14px 0 31px;
  border-radius: 0 0 10px 10px;
}
.service-box-content-three h4 {
  font-size: 22px;
  color: #000000;
  font-weight: 700;
  margin-bottom: 13px;
}
.service-box-content-three p {
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  width: 53%;
  margin: auto;
  padding-bottom: 26px;
}
.service-box-content-three-btn a {
  font-size: 16px;
  line-height: 26px;
  color: #ffc40f;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  transition: .5s;
}
.service-box-content-three-btn a:hover{
  color: #000000;
}

/* Counter Inner Page */
.counter-area {
  background: url(assets/images/counter-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0 100px;
}

.counter-title {
  overflow: hidden;
  display: inline-block;
}
.counter-numbar {
  display: inline-block;
  margin-right: 15px;
}
.counter-numbar h1 {
  font-size: 70px;
  color: #ffffff;
  font-weight: 700;
}
.counter-title h4 {
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 400;
}


/*===========================================
 <--Start Dreamhub Blog Inner Page Css-->
============================================*/

.blog-area {
  padding: 100px 0 100px;
}
.blog-single-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 42px 38px 32px;
  border-radius: 20px;
  margin-bottom: 44px;
}
.blog-thumb img {
  width: 100%;
  border-radius: 20px;
}
.blog-content-list ul {
  list-style: none;
}
.blog-content-list ul li {
  display: inline-block;
  margin-right: 28px;
}
.blog-content-list ul li a {
  display: inline-block;
  font-size: 14px;
  margin: 29px 0 13px;
  text-decoration: none;
}
.blog-content-list ul li a:hover {
  color: #ffc40f;
}
.blog-content-list ul li a i {
  margin-right: 5px;
  color: #ffc40f;
}
.blog-content-title h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-content-title h2 a {
  transition: .5s;
  text-decoration: none;
}
.blog-content-title h2 a:hover{
  color:#ffc40f;
}
.blog-content-discription {
  margin-bottom: 28px;
}
.blog-btn a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  background: #ffc40f;
  border: 1px solid #ffc40f;
  padding: 14px 34px;
  font-weight: 500;
  position: relative;
  border-radius: 11px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.blog-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.blog-btn a:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
}

/* sidebar area css */

.sidebar-seach-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  position: relative;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-search {
  display: flex;
}
.form-control {
  height: 55px;
  width: 100%;
  padding: 0 25px 0 25px;
  font-size: 16px;
  border-radius: 30px;
  background: #F6F4EC;
}
button.button {
  border: inherit;
  position: absolute;
  right: 0;
  background: none;
  left: 66%;
  top: 41px;
}
button.button i {
  background: #ffc40f;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 100%;
  font-size: 14px;
  color: #fff;
}
.sidebar-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-title h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 28px;
}
.sidebar-catagori ul {
  list-style: none;
}
.sidebar-catagori ul li {
  background: #F6F4EC;
  margin: 14px 0px 0px;
  padding: 17px 30px;
  border-radius: 10px;
}
.sidebar-catagori ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}
.sidebar-catagori ul li a:hover{
  color: #ffc40f;
}

.recent-post {
  display: flex;
  margin-bottom: 18px;
}
.recent-post-thumb img {
  border-radius: 8px;
}
.post-title a h4 {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  margin: 0px 10px 0px;
}
.post-title a h4:hover {
  color: #ffc40f;
}
.post-date a {
  font-size: 14px;
  margin: 0px 12px 0;
  transition: .5s;
  text-decoration: none;
}
.post-date a:hover {
  color: #ffc40f;
}
.post-date a i {
  font-size: 14px;
  margin-right: 3px;
  color: #ffc40f;
}

.sidebar-tag a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #ffc40f;
  border-radius: 30px;
  margin-right: 7px;
  margin-bottom: 13px;
  transition: .5s;
}
.sidebar-tag a:hover {
  background: #ffc40f;
  color: #000;
}
.blog-quote {
  padding: 50px 50px 50px 50px;
  background: #faf7f2;
  border-radius: 8px;
  position: relative;
  margin: 36px 0 36px;
}
.blog-quote::before {
  position: absolute;
  content: "\F6B0";
  font-family: 'bootstrap-icons';
  font-size: 50px;
  right: 36px;
  bottom: 51px;
  opacity: 0.06;
}
.blog-quote p {
  font-style: italic;
}
.blog-quote h3 {
  font-size: 20px;
  position: relative;
  margin: 0 63px;
}
.blog-quote h3::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 50px;
  background: #ffc40f;
  bottom: 8px;
  left: -62px;
}
h3.mt-40 {
  margin: 50px 0 19px;
}


/* paginatin css */
.as-pagination ul {
  list-style: none;
}
.as-pagination ul li {
  display: inline-block;
}
.as-pagination ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  background: rgb(1 15 26 / 6%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 7px;
  margin-left: 5px;
  transition: .5s;
}
.as-pagination ul li a:hover{
  background:#ffc40f ;
}
.as-pagination ul li a i {
  font-size: 18px;
  font-weight: 500;
}

/*===========================================
 <--Start dreamhub blog details area Css-->
============================================*/
.product-rating.style-two {
  margin-bottom: 24px;
}
.product-rating.style-two span {
  margin-left: 15px;
}
.product-title.style-two {
  margin-bottom: 21px;
}
.product-rate.style-two {
  margin-bottom: 24px;
}
.product-rate.style-two span {
  font-size: 20px;
  font-weight: 700;
  color: #ffc40f;
  margin-right: 11px;
}
.product-rate.style-two del {
  font-size: 20px;
  font-weight: 700;
}
.product-discription.style-two p {
  line-height: 1.75;
  margin-bottom: 28px;
}
.product-action.style-two {
  margin-bottom: 37px;
}
.product-action button {
  display: inline-block;
  font-size: 14px;
  background: #ffc40f;
  border: 1px solid #ffc40f;
  padding: 15px 36px 15px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.product-action button::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.product-action button:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
}
.product-action a i {
  background: #000;
  height: 58px;
  width: 60px;
  display: inline-block;
  line-height: 58px;
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-left: 20px;
  transition: .5s;
}
.product-action a i:hover{
  background:#ffc40f ;
}
.product-meta.style-two {
  margin-bottom: 28px;
}
.product-meta.style-two span {
  display: block;
  font-weight: bold;
  color: #000;
}
.product-meta.style-two a {
  margin-left: 10px;
  transition: .5s;
}
.product-meta.style-two a :hover{
  color:#ffc40f;
}
.product-meta.style-two span {
  display: block;
  font-weight: bold;
  color: #000;
  margin-bottom: 7px;
}
.product-title h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.product-title i {
  color: #ffc40f;
}
.product-social.style-two a i {
  background: #e0e0e0;
  font-size: 14px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  margin-right: 8px;
  transition: .5s;
}
.product-social.style-two a i:hover{
  background:#ffc40f ;
}

/* Form Box Css */
.comment-form {
  padding: 40px;
  box-shadow: 0px 6px 30px rgb(7 36 95 / 8%);
  border-radius: 10px;
}
.form-title h3 {
  margin-bottom: 30px;
}
.form-box.inner textarea {
  width: 100%;
  height: 150px;
  padding: 16px 17px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  transition: .5s;
  margin-bottom: 16px;
}
.form-box button {
  display: inline-block;
  font-size: 14px;
  background: #ffc40f;
  border: 1px solid #ffc40f;
  padding: 15px 36px 15px 36px;
  font-weight: 500;
  position: relative;
  border-radius:10px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.form-box button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.form-box button:hover::before {
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
}


/*===========================================
 <--Start dreamhub Shop Inner Page Css-->
============================================*/
.shop-single-box.style-two {
  margin-bottom: 40px;
}

/*===========================================
 <--Start dreamhub Shop Details Inner Page Css-->
============================================*/
.shop-details-area {
  padding: 100px 0 100px;
}
.shop-details-thumb img {
  width: 100%;
}
.product-details-title h3 {
  font-size: 44px;
  line-height: 44px;
  font-weight: 800;
  margin: 0;
  padding-bottom: 7px;
}
.product-details-title h3 span {
  font-size: 20px;
  color: #ffc40f;
  font-weight: 500;
}
.product-details-review {
  margin-bottom: 15px;
}
.product-details-review i {
  color: #ffc40f;
}
.product-details-review span {
  font-size: 16px;
  color: #000;
  margin-left: 20px;
}
.shop-details-content p {
  font-size: 16px;
  line-height: 24px;
}
.product-details-quantity {
  margin-bottom: 26px;
}
.product-details-quantity-title {
  float: left;
  margin-right: 35px;
}
 input#quantity {
  height: 45px;
  width: 72px;
  border: 2px solid #a7a7a7;
  border-radius: 5px;
  outline: 0;
}
.shop-details-btn a {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  background: #ffc40f;
  border: 1px solid #ffc40f;
  padding: 9px 40px 11px;
  font-weight: 500;
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
  margin-right: 15px;
  margin-bottom: 16px;
}
.shop-details-btn a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.shop-details-btn a:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
} 
.shop-details-social-title {
  display: inline-block;
  margin-right: 29px;
}
.shop-details-social-title h3 {
  font-size: 18px;
}
.shop-details-social-link {
  display: inline-block;
}
.shop-details-social-link a {
  height: 50px;
  width: 50px;
  background: #f3f3ed;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  margin-right: 7px;
  font-size: 15px;
  border-radius: 50%;
  transition: .5s;
}
.shop-details-social-link a:hover{
  background: #ffc40f;
  color: #ffff;
}

/* shop discription */
.row.discription {
  margin-top: 40px;
  border-bottom: 1px solid #f3f3ed;
  padding: 0px 0 30px;
  margin-bottom: 50px;
}
.shop-discription-title h4 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
}
.shop-discription-list {
  margin-bottom: 15px;
}
.shop-discription-list ul {
  list-style: none;
}
.shop-discription-list ul li {
  font-size: 16px;
  font-weight: 700;
}
.shop-discription-list ul li i {
  margin-right: 7px;
}

/* shop review */
.shop-details-content h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 30px;
}
.shop-details-review {
  position: absolute;
  right: 17%;
}
.shop-details-review i {
  color: #ffc40f;
}
.shop-details-comment-thumb {
  float: left;
  margin-right: 50px;
}
.shop-details-comment-thumb img {
  border-radius: 100%;
}
.shop-details-comment-content {
  margin-bottom: 85px;
}
.shop-details-comment-content h2 {
  font-size: 18px;
}
.shop-details-comment-content span {
  font-size: 14px;
}

/* contact box */
.input-box input {
  width: 100%;
  height: 50px;
  background: #f3f3ed;
  border: 1px solid #f3f3ed;
  margin-bottom: 30px;
  padding: 0 10px;
}
.input-box textarea {
  width: 100%;
  height: 160px;
  background: #f3f3ed;
  border: 1px solid #f3f3ed;
  padding: 10px 10px;
  margin-bottom: 30px;
}
.input-button button {
  font-size: 16px;
  background: #ffc40f;
  border: 1px solid #ffc40f;
  padding: 9px 40px 11px;
  font-weight: 500;
  position: relative;
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: .5s;
}
.input-button button::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0.0, 1);
  z-index: -1;
  opacity: 0;
  transition: .5s;
}
.input-button button:hover::before{
  opacity: 1;
  transform: scale(1,1);
  background: #fff;
  border-radius: 10px;
}
.input-button button i {
  font-size: 14px;
  margin-left: 5px;
}

/*===========================================
 <--Start dreamhub Contact us Inner Page Css-->
============================================*/
.contact-us-area {
  padding: 110px 0 110px;
}
.contact-single-box {
  text-align: center;
  background: #ffffff;
  filter: drop-shadow(0px 3px 3.5px rgba(0,0,0,0.35));
  padding: 40px 0px 33px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.contact-single-box::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  background: #ffc40f;
  border-radius: 10px;
  top: 0;
  right: 0;
  z-index: -1;
  transition: .5s;
}
.contact-single-box:hover:before{
  width: 100%;
  left: 0;
}
.contact-icon i {
  height: 77px;
  width: 77px;
  display: inline-block;
  line-height: 77px;
  color: #616161;
  border: 2px solid #616161;
  border-radius: 100%;
  font-size: 24px;
  transition: .5s;
}
.contact-single-box:hover .contact-icon i{
  color: #ffffff;
  border: 2px solid #ffffff;
}
.contact-content h5 {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 22px 0 12px;
  transition: .5s;
}
.contact-single-box:hover .contact-content h5{
  color: #ffffff;
}
.contact-content p {
  font-size: 14px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  margin: 0;
  transition: .5s;
}
.contact-single-box:hover .contact-content p{
  color: #ffffff;
}
.contact-content span {
  font-size: 14px;
  color: #616161;
  font-weight: 400;
  margin: 0;
  transition: .5s;
}
.contact-single-box:hover .contact-content span{
  color: #ffffff;
}



/*===========================================
 <--Start dreamhub shop card Inner Page Css-->
============================================*/
.shop-card-area {
  padding: 100px 0 100px;
}
/* table css */
table{
  width: 100%;
}
table thead {
  background: #ffc40f;
  height: 80px;
  color: #fff;
}
th.product-name {
  text-align: center;
}
th.product-quantity {
  text-align: center;
}
th.product-subtotal {
  text-align: center;
}
table tr {
  border: 1px solid #c1c1c1;
}
td.product-name {
  display: flex;
  align-items: center;
  height: 140px;
  text-align: inherit;
  margin: -1px -1px -1px -1px;
}
.porduct-thumb {
  margin-right: 30px;
}
.product-text a {
  display: block;
  font-size: 20px;
  color: #232323;
  font-weight: 700;
  text-decoration: none;
}
.product-text a:hover{
  color:#ffc40f ;
}
table tbody tr td {
  border: 1px solid #c1c1c1;
  text-align: center;
}
td.product-quantity input {
  width: 90px;
  height: 50px;
  border: 1px solid #c1c1c1;
  border-radius: 10px;
}
td.product-total {
  font-size: 20px;
  font-weight: 700;
  color: #ffc40f;
}
td {
  padding: 20px;
}
tr.coupon {
  background: #f5f8fd;
  height: 100px;
}
button.apply-coupon {
  background-color: #232323;
  color: #fff;
  padding: 20px 40px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
}
button.update-cart{
  background-color: #ffc40f;
  color: white;
  padding: 20px 40px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
}








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


/* 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: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 4s;
  -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; }
 

  @-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(-40px);
        transform: translateY(-40px); }
      50% {
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px); }
      100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px); } }
    @-webkit-keyframes float-bob4 {
      0% {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px); }
      50% {
        -webkit-transform: translateY(-35px);
        transform: translateY(-35px); }
      100% {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px); } }
    @-webkit-keyframes float-bob5 {
      0% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px); }
      50% {
        -webkit-transform: translateY(-35px);
        transform: translateY(-35px); }
      100% {
        -webkit-transform: translateY(-75px);
        transform: translateY(-75px); } }
    @-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);
      }
    }
    
    .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);
      }
    }
    
    @-webkit-keyframes rotateme {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    
    @-webkit-keyframes rotate3d {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
      }
    }
    
    @keyframes rotate3d {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
      }
    }
    
    @keyframes animationFramesOne {
      0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
                transform: translate(0px, 0px) rotate(0deg);
      }
      20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
                transform: translate(73px, -1px) rotate(36deg);
      }
      40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
                transform: translate(141px, 72px) rotate(72deg);
      }
      60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
                transform: translate(83px, 122px) rotate(108deg);
      }
      80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
                transform: translate(-40px, 72px) rotate(144deg);
      }
      100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
                transform: translate(0px, 0px) rotate(0deg);
      }
    }
    
    @-webkit-keyframes animationFramesOne {
      0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
      }
      20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
      }
      40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
      }
      60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
      }
      80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
      }
      100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
      }
    }
   











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

 .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, #ffc40f 0%, #ffc40f 100%);
    background-image: -webkit-linear-gradient(0deg, #ffc40f 0%, #ffc40f 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: #00AFF5;
}
 .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 Search Popup Css
=========================================*/

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

.search-popup{
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*===========================
<-- 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: #ffc40f;
  -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: #FF3C00;
  -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;
}