/*===============================================
Template Name: Dreamhub- Digital-Agency HTML5 Template
Version: 0.1
================================================*/

/*TABLE OF DREAMHUB*/
/*=====================
01. Dreamhub Topber  Area Css
02. Dreamhub Header Menu Area Css
03. Dreamhub Hero Area Css
04. Dreamhub About Area Css
05. Dreamhub Service Area Css
06. Dreamhub Skill Area Css
07. Dreamhub Counter Area Css
08. Dreamhub Feature Area Css
09. Dreamhub Testimonial Area Css
10. Dreamhub Brand Area Css
11. Dreamhub Subscribe Area Css
12. Dreamhub Footer Area Css
13. Dreamhub Bridcame Area Css
14. Dreamhub Team Area Css
15. Dreamhub Blog Details Area Css
16. Dreamhub Blog Area Css
17. Dreamhub Contacts Section Area Css
18. Dreamhub Faq Area Css
19. Dreamhub Pricing Area Css
20. Dreamhub Service Details Area Css
21. Dreamhub Team  Area Css
22. Dreamhub Search Popup Area Css
23. Dreamhub Search Box Css
24. Dreamhub Loader Css
=======================*/

/*================================
 <--Start Dreamhub header Area Css-->
==================================*/
/*top-address*/
.topber-area {
    padding: 40px 0 50px;
}
.top-address {
	float: right;
	position:relative;
}


.top-icon i {
	font-size: 25px;
	color: #db1d00;
	margin-right: 19px;
}
.top-menu-text p {
	font-size: 16px;
	margin-bottom: 3px;
	color: #606060;
	font-weight: 400;
}
.top-menu-text h4 {
	font-size: 16px;
	color: #050404;
	font-weight: 500;
}
/*================================
 <--Start Dreamhub header Area Css-->
==================================*/
.header-area {
    position: relative;
    margin-bottom: -76px;
    z-index: 1;
	padding: 8px 0;
}
.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: #DB1D00 !important;
    transition: .5s;
    z-index: 99;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}
.logo-1 {
    display: block !important;
    transition: .5s;
    z-index: 99;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}
.logo-2 {
    display: none;
}
.div-1 {
    display: none !important;
}
.div-2 {
    display:block;
}
.row.header-bg {
	background: #DB1D00;
	position: relative;
	top: -30px;
}
.sticky .row.header-bg {
    background: inherit;
    top: 0;
}
/*header-menu*/
.header-menu ul {
	display: inline-block;
}
.header-menu ul li {
	display: inline-block;
	list-style: none;
}
.header-menu ul li a {
	font-size: 16px;
	color: #ffffff;
	font-weight: 400;
	display: inline-block;
	padding: 20px 17px;
	position: relative;
}
.header-menu ul li a i {
	display: inline-block;
	margin-right: -10px;
}
.header-menu ul li a::after {
	position: absolute;
	content: "";
	left: 18px;
	bottom: 14px;
	height: 2px;
	width: 0%;
	background: #fff;
	transition:.5s;
}
/*sub-menu*/
.header-menu ul li .sub-menu {
    position: absolute;
    text-align: center;
    background: #fff;
    padding: 15px 30px;
    width: 215px;
    border-radius: 3px;
    top: 115%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: 1;
    margin-top: 5px;
    border-top: 2px solid #DB1D00;
}
.header-menu ul li .sub-menu ul li {
	display: block;
}
.header-menu ul li .sub-menu ul {
	display: block;
	text-align: left;
	
}
.sub-menu ul li a {
    display: inline-block;
    padding: 8px 0;
    font-size: 16px;
    color: #222;
    text-transform: capitalize;
    font-weight: 500;
    position: relative;
}
.sub-menu ul li a::before {
	position: absolute;
	content: "";
	left: 0px;
	bottom: 4px;
	height: 2px;
	width: 0%;
	background: #DB1D00;
	transition:.5s;
}
.sub-menu ul li a:hover:before {
    width: 100%;
}
.sub-menu ul li a:hover{
	color: #DB1D00;
}
.added-new-submenu:hover .sub-menu {
	visibility:visible;
	top:100%;
	opacity:1;
}
.header-menu ul li .sub-menu a::after {
	display:none;
}
/*header-search-button*/
.search-box-btn.search-box-outer {
    display: inline-block;
}
.search-box-btn.search-box-outer a i {
    color: #fff;
	display:inline-block;
}
/*header-contact-btn*/
.header-contact-btn {
    display: inline-block;
}
.header-contact-btn a {
    font-size: 18px;
    line-height: 27px;
    color: #050129;
    font-weight: 500;
    font-family: "Oswald";
    background: #fff;
    display: inline-block;
    padding: 18px 40px;
    border: 1px solid rgb(219, 30, 1,0.3);
    position: relative;
    left: 21px;
	transition:.5s;
}
.header-contact-btn a i {
	margin-right: 17px;
	color: #DB1D00;
	display:inline-block;
}
/*all hover*/
.header-menu ul li a:hover:after{
	width: 68%;
}

/*================================
 <--Start Dreamhub Hero Area Css-->
==================================*/
.hero-area {
	background: url(assets/images/banner.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 845px;
}
/*hero-title*/
.hero-title h5 {
    font-size: 20px;
    color: #db1d00;
    font-weight: 500;
    position: relative;
    margin-bottom: 17px;
    animation: 1.1s fadeInLeft;
}
.hero-title h5::before {
	position: absolute;
	content: "";
	left: 262px;
	top: 9px;
	height: 2px;
	width: 78px;
	background: #db1d00;
}
.hero-title h5::after {
	position: absolute;
	content: "";
	left: 262px;
	top: 14px;
	height: 2px;
	width: 50px;
	background: #db1d00;
}
.hero-title h1 {
	font-size: 60px;
	line-height: 63px;
	color: #050129;
	font-weight: 700;
	animation: 1.1s fadeInLeft;
}
.hero-description p {
    font-size: 18px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    margin: 26px 0 32px;
    width: 79%;
    animation: 1.1s fadeInLeft;
}
/*hero-button*/
.hero-button a i {
	font-size: 12px;
	margin-left: 15px;
}
.hero-button {
	display: inline-block;
}
.hero-button a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    background: #db1d00;
    padding: 15px 31px 15px;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    z-index: 44;
    overflow: hidden;
   -webkit-animation: 1s fadeInUp both;
    animation: 1.1s fadeInUp both;
}
.hero-button a::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -30px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
/*hero-video-icon*/
.hero-video-icon {
    display: inline-block;
    position: relative;
    top: -22px;
	-webkit-animation: 1s fadeInUp both;
    animation: 1.1s fadeInUp both;
}
.hero-video-icon a i {
	color: #fff;
	background: #DB1D00;
	height: 60px;
	width: 60px;
	line-height: 60px;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	margin-left: 17px;
	margin-right: 5px;
}
.hero-video-icon span {
	font-size: 16px;
	color: #050129;
	font-weight: 500;
}
/*hero-thumb*/
.hero-thumb {
    margin-top: 43px;
}
/*all hover*/
.hero-button a:hover::before {
	width: 133%;
}
/*================================
 <--Start Dreamhub section Css-->
==================================*/
.section-sub-title h3 {
	font-size: 20px;
	color: #db1d00;
	font-weight: 500;
	margin-bottom: 17px;
	position:relative;
	display:inline-block;
}
.section-sub-title h3::before {
	position: absolute;
	content: "";
	right: -90px;
	top: 9px;
	background: #f00;
	height: 2px;
	width: 78px;
}
.section-sub-title h3:after {
    position: absolute;
    content: "";
    right: -62px;
    top: 15px;
    background: #f00;
    height: 2px;
    width: 50px;
}
.sectio-mean-title h1 {
	font-size: 40px;
	line-height: 42px;
	color: #050129;
	font-weight: 700;
}
.section-description p {
    margin-top: 17px;
    width: 99%;
    margin-bottom: 29px;
}
/*================================
 <--Start Dreamhub About Area Css-->
==================================*/
.about-area {
    padding: 96px 0 122px;
}
.about-left {
    position: relative;
    margin-left: -14px;
}
.about-left::before {
	position: absolute;
	content: "";
	top: 6px;
	right: 52px;
	width: 5px;
	height: 166px;
	background-color: #db1d00;
}
.about-shape {
    position: absolute;
    right: 4px;
    top: 360px;
}
.top-img-up-down2{
	-webkit-animation: top-image-bounce 2s infinite ease-in-out;
     animation: top-image-bounce 2s infinite ease-in-out;
}
@-webkit-keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
  }

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
  }
}

@-webkit-keyframes ripple-white3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-white3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
  }
}

.about-shape-two {
	position: absolute;
	top: 355px;
	left: 133px;
}
/*animation*/
.top-img-up-down{
	-webkit-animation: top-image-bounce 4s infinite ease-in-out;
     animation: top-image-bounce 4s infinite ease-in-out;
}
@-webkit-keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
  }

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
  }
}

@-webkit-keyframes ripple-white3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-white3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0);
  }
}
.abt-sngle-box {
    margin: 9px 0;
}
.about-icon {
	display: inline-block;
}
.about-icon i {
	width: 20px;
	height: 20px;
	border-radius: 50px;
	background-color: #db1d00;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	margin-right: 15px;
}
.about-title {
	display: inline-block;
}
.about-title h3 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
}
.about-button a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    background: #DB1D00;
    padding: 13px 23px 13px;
    display: inline-block;
    border-radius: 5px;
    margin-top: 23px;
    position: relative;
    overflow: hidden;
    z-index: 44;
}
.about-button a::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -30px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
.about-button a i {
	font-size: 14px;
	margin-left: 10px;
	display: inline-block;
}
/*all hover*/
.about-button a:hover::before {
	width: 142%;
}

/*================================
 <--Start Dreamhub Service Area Css-->
==================================*/
.service-area {
    background: #fbeeec;
    padding: 97px 0 70px;
}
.service-area .section-title {
	margin-bottom: 43px;
}
.service-area .section-description p {
	width: 100%;
}
/*service button*/
.service-button {
	text-align: right;
}
.service-button a {
	font-size: 16px;
	color: #ffffff;
	display: inline-block;
	background: #DB1D00;
	padding: 12px 30px;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	z-index: 44;
}
.service-button a::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -29px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
.service-button a i {
	display: inline-block;
	font-size: 12px;
	margin-left: 10px;
}
.single-service-box {
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
	background: #fff;
	padding: 45px 11px 36px 29px;
	margin-bottom: 30px;
	border-radius: 5px;
	position: relative;
	z-index: 1;
	transition:.5s;
}
.single-service-box::before {
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 0%;
	height: 5px;
	background: #DB1D00;
	content: "";
	z-index: -1;
	opacity: 0;
	transition: .5s;
	border-radius: 0 0 5px 5px;
}
/*service-box-icon*/
.service-box-icon {
	margin-bottom: 15px;
}
.service-box-icon img {
	display: inline-block;
}
.service-box-title {
	display: inline-block;
}
.service-box-title h3 {
	font-size: 22px;
	color: #050129;
	font-weight: 500;
	margin-left: 16px;
}

.service-box-title-about h3 {
	font-size: 22px;
	color:crimson;
	font-weight: 500;
}

.service-box-conten-about {
	font-size: 14px;
	color:black;
    font-weight: 500;
    text-align:left;
}

/*service-box-bt*/
.service-box-btn a {
	font-size: 16px;
	color: #db1d00;
	font-weight: 500;
	display: inline-block;
	margin-left: 30px;
	position: relative;
}
.service-box-btn a::after {
	position: absolute;
	left: -36px;
	top: 10px;
	height: 2px;
	width: 26px;
	background: #db1d00;
	content: "";
}
/*all hover*/
.single-service-box:hover {
   
}
.service-button a:hover:before{
	width:138%;
}
.single-service-box:hover::before {
	width: 100%;
	opacity: 1;
	right: 50%;
}

/*================================
 <--Start Dreamhub Skill Area Css-->
==================================*/
.skill-area {
	padding: 100px 0 100px;
}
.skill-left {
	position: relative;
	left: -59px;
}
/*skill shape*/
.skill-thumb-shape-one {
	position: absolute;
	top: 0;
	right: -63px;
}
.skill-thumb-shape-two {
	position: absolute;
	bottom: 15px;
	left: 45px;
}
.skill-area .section-description p {
    width: 85%;
    margin: 21px 0 28px;
}
/*prossess ber*/
.prossess-ber-plugin span {
	font-size: 16px;
	color: #050129;
	font-weight: 500;
}
.barfiller {
	width: 80%;
	height: 5px;
	background: #e9e8e8;
	position: relative;
	margin-bottom: 20px;
	margin-top: 4px;
	border-radius: 5px;
}
span.fill {
    background: #e91f4f !important;
    border-radius: 5px;
}
.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}
.barfiller .tipWrap { display: none; }
.barfiller .tip {
	margin-top: -29px;
	padding: 2px 4px;
	left: 0px;
	border-radius: 2px;
	position: absolute;
	z-index: 2;
	font-size: 16px;
	color: #050129;
	font-weight: 500;
}
.barfiller .tip::after {
	content: "";
	display: block;
	position: absolute;
	left: 29px;
	top: 25px;
	z-index: 9;
	height: 13px;
	width: 13px;
	border: 1px solid red;
	border-radius: 50%;
}
.stat-bar:nth-of-type(1) .stat-bar-rating {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

/*skill button*/
.skill-button a {
	font-size: 16px;
	color: #ffffff;
	background: #DB1E01;
	padding: 12px 25px;
	display: inline-block;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	z-index: 44;
	margin-top: 23px;
}
.skill-button a:before{
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -29px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
.skill-button a i {
	font-size: 14px;
	margin-left: 10px;
	display: inline-block;
} 
/*all hover*/
.skill-button a:hover:before{
		width:138%;
}
/*================================
 <--Start Dreamhub Counter Area Css-->
==================================*/
.counter-area {
	position: relative;
	padding: 10px 0 80px;
    background: #fbeeec;
}
.row.counter-bg {
	background: #FEF4F3;
	padding: 41px 0 42px;
	border-radius: 10px;
}
.row.counter-bg-about {
	background: #fbeeec;
	padding: 41px 0 42px;
	border-radius: 10px;
}
.counter-box-content {
	text-align: center;
}
.counter-namber h1 {
	font-size: 46px;
	color: #db1d00;
	font-weight: 500;
	display: inline;
}
.counter-title h3 {
	font-size: 18px;
	color: #050129;
	font-weight: 500;
	margin-top: 16px;
}
/*conter shape*/
.counter-shape-one {
	position: absolute;
	top: -16px;
	right: 354px;
	z-index: -1;
}
.counter-shape-tow {
	position: absolute;
	bottom: 54px;
	margin-left: -42px;
	z-index: -1;
}
/*================================
 <--Start Dreamhub Feature Area Css-->
==================================*/
.feature-area {
    padding: 103px 0 70px;
}
.feature-area .section-title {
	margin-bottom: 47px;
}
.feature-area .section-description p {
	margin-top: 25px;
	width: 72%;
}
.feature-button {
	text-align: right;
}
.feature-button a {
	color: #fff;
	background: #DB1E01;
	font-size: 16px;
	display: inline-block;
	font-weight: 400;
	padding: 12px 24px;
	border-radius: 5px;
	overflow: hidden;
	z-index: 44;
	position: relative;
}
.feature-button a:before{
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -29px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
.feature-button a i {
	display: inline-block;
	font-size: 12px;
	margin-left: 10px;
}
/*feature single box*/
.feature-single-box {
	transition: .5s;
	position:relative;
	overflow:hidden;
	z-index:44;
	margin-bottom:30px;
}
.feature-single-box::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	background: #E05848;
	border-radius: 10px;
	transition: .5s;
	opacity: 0.8;
}
/*feature thumb*/
.feature-thumb img {
	width: 100%;
}
/*feature box button*/
.feature-box-btn {
	position: absolute;
	top: 70%;
	left: 94px;
	transform: translateY(-50%);
	text-align: center;
	opacity:0;
	transition:.5s;
}
.feature-box-btn a {
	font-size: 16px;
	color: #080202;
	font-weight: 500;
	display: inline-block;
	background: #fff;
	padding: 16px 20px;
	border-radius: 5px;
	
}
.feature-box-btn a i {
	font-size: 16px;
	display: inline-block;
	margin-left: 10px;
}
/*all hover*/
.feature-button a:hover:before{
	width:138%;
}
.feature-single-box:hover::before {
	width: 100%;
	left: 0;
}
.feature-single-box:hover .feature-box-btn {
	opacity: 1;
	top: 50%;
}
/*================================
 <--Start Dreamhub Testimonila Area Css-->
==================================*/
.testimonial-area {
	background: #FEF4F3;
	padding: 100px 0 0;
}
/*testimonial-box*/
.testimonial-box {
	text-align: center;
}
.testimonial-area .owl-carousel .owl-item img {
	display: inline-block !important;
}
.testi-name-title {
	margin-top: 22px;
}
.testi-name-title h3 {
	font-size: 18px;
	color: #050129;
	font-weight: 500;
	margin-bottom: 0px;
}
.testi-name-title p {
	font-size: 14px;
}
.testi-star-icon i {
	color: #FE0000;
	font-size: 16px;
	margin: 23px 4px 40px;
	display: inline-block;
}
.style-1.bi.bi-star-fill {
	color: #616362;
}
.testi-text p {
	font-size: 22px;
	color: #050129;
	font-weight: 400;
	width: 46%;
	text-align: center;
	margin: 0 auto 0;
	line-height: 30px;
	opacity: 0.800;
}
/*owl-nav*/
.owl-nav {
	position: relative;
	top: -219px;
}
.owl-prev {
	display: inline-block;
	height: 35px;
	width: 40px;
	border: 1px solid #DB1D00;
	border-radius: 5px;
	line-height: 35px;
	text-align: center;
	color: #DB1D00;
	position: absolute;
	left: 169px;
	transition:.5s;
}
.owl-next {
	position: absolute;
	display: inline-block;
	right: 167px;
	height: 35px;
	width: 40px;
	line-height: 35px;
	border: 1px solid #DB1D00;
	border-radius: 5px;
	color: #DB1D00;
	text-align: center;
	transition:.5s;
}
/*all hover*/
.owl-prev:hover {
    background: #fff;
    color: red;
}
.owl-next:hover {
    background: #fff;
    color: red;
}
/*================================
 <--Start Dreamhub brand Area Css-->
==================================*/
.brand-area {
    background: #FEF4F3;
    padding: 67px 115px 72px;
}
.brand-grid {
    text-align: center;
}
.owl-carousel .owl-item img {
    display: inline-block !important;
}
.brand-thumb img {
    opacity: 0.8;
    transition: .5s;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
.brand-thumb img:hover {
    opacity: 1;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
/*================================
 <--Start Dreamhub Subscribe Area Css-->
==================================*/
.subscribe-area {
	padding: 95px 0 79px;
}
.subscribe-area .section-title {
	text-align: center;
	margin-bottom: 34px;
}
.subscribe-area .section-description p {
	width: 44%;
	margin: auto;
}
.subscribe-box {
	text-align: center;
}
.form-box input {
	width: 54%;
	height: 59px;
	outline: 0;
	border: solid 1px red;
	border-radius: 5px;
	position: relative;
	padding: 0 186px 0 21px;
}
.form-box input::placeholder {
	font-size: 18px;
}
.button {
    position: absolute;
    bottom: 58px;
    right: 256px;
}
.button .btn {
	background: #FE0000;
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 0 5px 5px 0;
}
.button .btn i {
	font-size: 15px;
	margin-left: 10px;
}
.email-description input {
	display: inline-block;
}
.email-description p {
	display: inline-block;
	margin-top: 18px;
	margin-left: 5px;
}

/*================================
 <--Start Dreamhub Footer Area Css-->
==================================*/
.footer-area {
	background: #050129;
	padding: 100px 0 27px;
}
.footer-description p {
	font-size: 16px;
	color: #ffffff;
	line-height: 25px;
	margin: 37px 0 39px;
}
.footer-fllow {
	display: inline-block;
}
.footer-fllow a {
	display: inline-block;
	color: #fff;
	font-weight: 500;
	list-style: none;
	margin-right: 10px;
	transition:.5s;
}
.footer-social-address {
	display: inline-block;
}
.footer-social-address ul li {
	list-style: none;
	display: inline-block;
}
.footer-social-address ul li a {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	padding-left: 9px;
}
/*footer title*/
.footer-title h3 {
	font-size: 22px;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 53px;
}
.footer-list ul li {
	list-style: none;
}
.footer-list ul li a {
	display: inline-block;
	color: #fff;
	margin-bottom: 10px;
}
.footer-list ul li a i {
	display: inline-block;
	margin-right: 11px;
}
/*about footer-info*/
.company-info p {
	color: #fff;
	margin-bottom: 14px;
}
.footer-address p {
	color: #fff;
	margin-bottom: 11px;
}
.footer-social-info p {
	color: #fff;
	margin-bottom: 10px;
}
/*recent-post-item*/
.recent-post-item {
    margin-bottom: 15px;
    padding-top: 4px;
}
.recent-post-item.active {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 4px;
}
.recent-tost-img {
    float: left;
    margin-right: 13px;
}
.recent-tost-text a {
	color: #fff;
	font-size: 16px;
	line-height: 25px;
}
.recent-tost-text p {
	color: #fff;
	font-size: 14px;
	line-height: 22px;
}
.rcomment {
	margin-top: -5px;
}
/*all hover*/
.footer-fllow a:hover {
    color: #FE0000;
}
.footer-list ul li a:hover {
    color: #FE0000;
}
.footer-social-address ul li a:hover {
	color: #FE0000;
}
.recent-tost-text a:hover {
    color: #DB1E01;
}
/*================================
 <--Start Dreamhub Footer bottom Area Css-->
==================================*/
.row.footer-btm {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 50px;
    padding-top: 25px;
}
.footer-bottom-conten span {
	color: #fff;
	opacity: 0.5;
}
.footer-bottom-right {
	text-align: right;
}
.footer-bottom-right a {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	padding-left: 26px;
	opacity: 0.5;
	
}
/*================================
 <--Start Dreamhub Inner page Area Css-->
==================================*/
/*breadcumb*/
.breadcumb-area {
    background: url(assets/images/ablutbenner-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    position: relative;
}
.breadcumb-area:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #2B3063;
    opacity: 0.5;
}



.breadcumb-area-contact {
    background: url(assets/images/about-header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
    position: relative;
}
.breadcumb-area-contact:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #2B3063;
    opacity: 0.5;
}


.breadcumb-area-service {
    background: url(assets/images/service-banner.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
    position: relative;
}
.breadcumb-area-service:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #2B3063;
    opacity: 0.5;
}



.breadcumb-area-technology {
    background: url(assets/images/service-banner.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
    position: relative;
}
.breadcumb-area-technology:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #2B3063;
    opacity: 0.5;
}

.breacumb-content {
    text-align: center;
}
.breadcumb-title h1 {
    font-size: 65px;
    color: #fff;
    margin-bottom: 18px;
}
.breadcumb-content-text a {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    display: inline-block;
	transition:.5s;
}
.breadcumb-content-text a:hover{
	color:#DB1D00;
}
.breadcumb-content-text i {
    color: #fff;
    margin: 0 10px;
}
.breadcumb-content-text span {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
/*================================
 <--Start Dreamhub Team  area Css-->
==================================*/
.team-area {
    background: #F8F9FC;
    padding: 96px 0 99px;
}
.row.upper.d-flex.align-items-center {
    margin-bottom: 15px;
}
.team-area .section-description p {
    width: 64%;
    margin-top: 27px;
}
/*team-button*/
.tem-buttom {
    text-align: right;
}
.tem-buttom a {
    color: #fff;
    background: #DB1E01;
    font-size: 16px;
    display: inline-block;
    font-weight: 400;
    padding: 12px 24px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 44;
    position: relative;
}
.tem-buttom a:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    left: -29px;
    background: #E05639;
    transform: skew(50deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}
/*team-box*/
.single-team-box {
    overflow: hidden;
    margin-bottom: 30px;
}
.team-thumb {
    position: relative;
}
.team-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background:linear-gradient(180deg,#DB1D00,#E05639);
    z-index: 1;
    opacity: 0;
	transition:.5s;
}
.team-thumb img {
    width: 100%;
}
/*team-social icon*/
.team-social-icon {
    position: absolute;
    border-radius: 5px;
    top: 50%;
    right: -39px;
    z-index: 1;
    text-align: center;
    transform: translateY(-50%);
    transition: .5s;
}
.team-social-icon ul {
    display: inline-block;
    list-style: none;
}
.team-social-icon ul li a {
    display: inline-block;
    margin: 5px 0;
}
.team-social-icon ul li a i {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    background: #fff;
    color: #DB1D00;
    border-radius: 5px;
}
/*team-content*/
.single-team-conten {
    position: absolute;
    bottom: 0;
    left: 20px;
    opacity: 0;
	transition: .5s;
	z-index:1;
}
.single-team-conten h3 {
    margin-bottom: 4px;
}
.single-team-conten h3 a {
    color: #fff;
	font-size: 20px;
    font-weight: 500;
	display:inline-block;
}
.single-team-conten p {
    color: #f5efef;
}
/*all hover*/
.single-team-box:hover .team-thumb:before {
    opacity:.70;
}
.single-team-box:hover .team-social-icon {
    right: 10px;
}
.tem-buttom a:hover:before {
    width: 136%;
}
.single-team-box:hover .single-team-conten {
    opacity: 1;
}
/*================================
 <--Start Dreamhub Service details Css-->
==================================*/
.service-details {
    padding: 100px 0 100px;
}

.service-sidber-box.d-flex.align-items-center {
    background: blueviolet;
    padding: 10px 0 10px;
}

/*================================
 <--Start Dreamhub Contacts Section Css-->
==================================*/
.contacts-section {
    padding: 0px 0px 30px 0px;
}
.row.section {
    box-shadow: 8px 9px 35px 0px rgb(145 145 145 / 24%);
    padding: 60px 59px 59px 59px!important;
    background: #fff;
    margin-top: 100px;
    position: relative;
}
.single-contacts-boxs {
    padding: 65px 0 48px 39px;
    margin: 0px 29px 0px 0px;
    background: #DB1D00;
    border-radius: 5px;
    opacity: .90;
}
/*letf bpxs*/
.left-boxs {
    margin-bottom: 7px;
}
.contacts-icon {
    float: left;
}
.contacts-icon ul li{
    display: inline-block;
    list-style: none;
}
.contacts-icon ul li i {
    display: inline-block;
    margin: 0px 25px 15px 0;
    font-size: 47px;
    float: left;
    color: #fff;
    position: relative;
    top: 5px;
}
.contacts-tex h2 {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 20px;
    margin: 0 0 10px 0;
}
.contacts-tex p {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 28px;
}
.contacts-titles h2 {
    font-size: 32px;
    margin: 0 0 34px;
    color: #1d2124;
    line-height: 1.2;
    font-weight: 600;
}
.contacts-section .form_box input {
    width: 100%;
    height: 54px;
    padding-left: 20px;
    background: #F0F0F4;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #DB1D00;
    outline: 0;
    margin-bottom: 20px;
}
.contacts-section .form_box textarea {
    width: 100%;
    padding-left: 20px;
    padding-top: 15px;
    border: 1px solid #DB1D00;
    height: 150px;
    outline: 0;
    transition: .5s;
    background: #F0F0F4;
    margin-top: 7px;
}
.contacts-section button {
    background: linear-gradient(to right, #533efe, #DF341A);
    width: 100%;
    padding: 14px 39px;
    border-radius: 5px;
    color: #fff;
    border: inherit;
    font-size: 18px;
    font-weight: 600;
}
/*================================
 <--Start Dreamhub google area  Css-->
==================================*/
.google-maps iframe {
    width: 100%;
    height: 600px;
}
/*================================
 <--Start Dreamhub Sservice Details Section Css-->
==================================*/
.service-details-thumb img {
    width: 100%;
}
/*service-thumb*/
.service-thumb img {
    width: 100%;
    border-radius: 5px;
}
.service-single-item h1 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}
.service-detaile-description .mt30 {
    margin: 26px 0 32px;
}
.service-icon-box p {
    color: #050129;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.800;
}
.service-icon-box span i {
    font-size: 18px;
    color: red;
    margin-right: 10px;
}
/*sidebar*/
.sidebar-search-button {
    background: #F0F0F4;
    padding: 35px 62px 35px;
    border-radius: 5px;
}
.blog-details-area .search-button {
    position: absolute;
    top: 42px;
    right: 63px;
}
.sidebar-box {
    background: #F0F0F4;
    margin-top: 0px;
    padding: 34px 41px 46px;
    border-radius: 5px;
}

.sidebar-box1 {
    background: #F0F0F4;
    margin-top: 30px;
    padding: 34px 41px 46px;
    border-radius: 5px;
}

.sidebar-box h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 35px;
    position: relative;
}
.sidebar-box h3::after {
    position: absolute;
    content: "";
    left: 0;
    top: 41px;
    height: 1px;
    width: 100%;
    background: red;
}
.service-center-description h3 {
    margin: 12px 0 20px;
}
/*form-boxs*/
.form-boxs input {
    position: relative;
    outline: 0;
    width: 120%;
    margin-left: -22px;
    border: 0;
    height: 50px;
    border-radius: 5px;
    padding: 0 54px 0 10px;
}
.service-details .search-button {
    position: absolute;
    right: 45px;
    top: 42px;
}
.search-button .bttn {
    background: #FF0000;
    outline: 0;
    border: 0;
    cursor: pointer;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
}
/*sidebar-menu*/
.sidebar-menu ul li {
    display: block;
    list-style: none;
    background: #fff;
    margin-bottom: 10px;
    padding: 12px 0 12px 12px;
    border-radius: 5px;
}
.sidebar-menu ul li a {
    display: block;
    font-size: 18px;
    color: #050129;
    opacity: 0.800;
    font-weight: 500;
}
.sidebar-menu ul li a span i {
    display: inline-block;
    font-size: 15px;
    margin-right: 16px;
}
.sidebar-info a {
    display: inline-block;
    font-weight: 500;
    color: #050129;
    margin-bottom: 5px;
    transition: .5s;
}
.sidebar-info a i {
    display: inline-block;
    color: red;
    margin-right: 5px;
    font-size: 15px;
}
/*all hover*/
.sidebar-menu ul li a:hover {
    color: #DB1D00;
}
.sidebar-info a:hover {
    color: red;
}
/*================================
 <--Start Dreamhub Blog-grid Section Css-->
==================================*/
.blog-grid-area {
    padding: 100px 0 100px;
}
.blog-grid-area .section-title {
    margin-bottom: 44px;
}
.blog-grid-area .section-description p {
    width: 62%;
}
/*single-blog-box*/
.single-blog-box {
    margin-bottom: 30px;
}
.single-bolg-thumb {
    overflow: hidden;
	position:relative;
	z-index: 44;
}
.single-bolg-thumb:before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #E05848;
    opacity: 0.800;
    transition: .5s;
	z-index:44;
}
.single-bolg-thumb img {
    width: 100%;
	transition:.5s;
}
.single-blog-content {
    background: #fff;
    box-shadow: 0 4px 30px rgb(0 0 0 / 12%);
    padding: 22px 0 22px 29px;
	position:relative;
}
.single-blog-content:after {
    position: absolute;
    content: "";
    left: 0;
    top: 21px;
    height: 50px;
    width: 2px;
    background: #DB1D00;
}
.post-categories a {
    display: inline-block;
    color: #616161;
    margin-top: 4px;
}
.blog-page-title h4 a {
    display: inline-block;
    font-weight: unset;
    font-size: 23px;
    color: #050129;
    margin-top: 15px;
	transition:.5s;
}
/*all hover*/
.single-blog-box:hover .single-bolg-thumb::before {
    width: 100%;
    left: 0;
}
.single-blog-box:hover .single-bolg-thumb img {
    transform: scale(1.1);
}
.datatech-blog-meta a:hover {
    color: #DB1D00;
}
.post-categories :hover{
	 color: #DB1D00;
}
.blog-page-title h4 a:hover {
    color: #DB1D00;
}
/*================================
 <--Start Dreamhub Blog-Details area Css-->
==================================*/

.blog-details-area{
    padding: 100px 0 100px;
}
.single-blog-details-thumb img {
    width: 100%;
}
.blog-details-content {
    padding: 25px 30px 39px;
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
}
.blog-details-meta {
    display: inline-block;
}
.blog-details-meta a {
    display: inline-block;
    margin-right: 18px;
}
.meta-blog-right {
    display: inline-block;
    margin-left: 18px;
}
.blog-details-content-text {
    margin: 10px 0 23px;
    text-align: justify;
}
.single-blogs-thumb img {
    width: 100%;
}
.blog-details-text p {
    margin: 23px 0 0px;
    text-align: justify;
}
.blog-details-content-text-inner p {
    text-align: justify;
    margin: 18px 0 23px;
}
.blog-details-title-two {
    margin-top: 25px;
}

.blog-details-social-address ul li {
    list-style: none;
}
.blog-details-social-address ul li a {
    display: inline-block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    border: 1px solid #DB1D00;
    border-radius: 5px;
    margin-right: 8px;
    text-align: center;
    font-size: 15px;
	transition:.5s;
}
/*from box*/
.contact-box {
    background: #fff;
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
    padding: 25px 29px 29px;
    margin-top: 35px;
}
.contact-title h2 {
    font-size: 21px;
    margin: 0 0 30px;
}
.form_box input {
    height: 50px;
    width: 100%;
    background-color: #F0F0F4;
    border: solid 1px #DB1D00;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: 500;
    padding: 0 10px;
    outline: 0;
}
.form_box textarea {
    width: 100%;
    background: #F0F0F4;
    border-radius: 5px;
    border: 1px solid #DF341A;
    padding: 10px 0px 0 15px;
    font-weight: 500;
    outline: 0;
}
.form-button button {
    display: inline-block;
    border: none;
    background: #DB1D00;
    color: #fff;
    font-size: 16px;
    padding: 12px 22px;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    z-index: 44;
}
.form-button button:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    left: -29px;
    background: #E05639;
    transform: skew(50deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}
/*sidebar*/
.resent-post-single-box {
    margin-bottom: 20px;
}
.sidebar-thumb-content {
    margin-left: 13px;
}
.sidebar-thumb-title a h2 {
    font-size: 17px;
    display: inline-block;
    margin: 0 0 3px;
	transition:.5s;
}
.sidebar-thumb-title span {
    font-size: 14px;
}
/*Tags-Cloud*/
.Tags-Cloud-title a {
    display: inline-block;
    border: solid 1px #DB1D00;
    padding: 6px 15px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
	transition:.5s;
}

/*all hover*/
.blog-details-meta a:hover {
    color: #DB1D00;
}
.blog-details-meta span:hover {
    color: #DB1D00;
}
.meta-blog-right a:hover {
    color: #DB1D00;
}
.form-button button:hover:before {
    width: 138%;
}
.blog-details-title a h1:hover {
    color: #DB1D00;
}
.blog-details-social-address ul li a:hover {
    background: #DB1D00;
    color: #fff;
}
.sidebar-thumb-title a h2:hover {
    color: #DB1D00;
}
.Tags-Cloud-title a:hover {
    background: #DB1D00;
    color: #fff;
}
/*==============================*/
/*Start css Protfolio Area*/
/*==============================*/
.protfolio-area {
	padding: 100px 0 100px;
}
.protfolio-area .section-title {
	margin-bottom: 33px;
}
.protfolio-area .section-title {
	text-align: center;
}
.protfolio-area .section-description p {
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto 0;
	width: 33%;
	margin-top: 18px;
}
/*single-protfolio-item*/
.single-protfolio-item {
    overflow: hidden;
    position: relative;
}

.protfolio-thumb img {
    width: 100%;
    transition: .5s;
    -webkit-filter: grayscale(100%);
    display: block;
}
.protfolio-thumb:before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: #DB1D00;
    height: 88%;
    width: 88%;
    margin: auto;
    opacity: 0.800;
    transform: scale(0);
    transition: .5s;
    z-index: 44;
}
.prot-content {
	text-align: center;
	transition: .5s;
	position: absolute;
	top: 142px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	z-index: 44;
}
.prot-content h3 {
    color: #fff;
    font-size: 22px;
}
.prot-content span {
    color: #fff;
    font-size: 18px;
} 
/*all hover*/
.single-protfolio-item:hover .protfolio-thumb img {
    -webkit-filter: grayscale(0%);
	transform:scale(1.1);
}
.single-protfolio-item:hover .prot-content {
    opacity: 1;
}
.protfolio-thumb:hover:before {
    transform: scale(1);
}
/*<!-- ============================================================== -->
<!-- Start  faq-area  Css -->
<!-- ============================================================== -->*/
.faq-area {
	padding: 100px 0 50px;
	background: #FBEEEC;
}
.faq-button a {
	font-size: 16px;
	color: #ffffff;
	display: inline-block;
	background: #DB1D00;
	padding: 12px 40px;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	z-index: 44;
	margin-top: 19px;
}
.faq-button a::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	top: 0px;
	left: -29px;
	background: #E05639;
	transform: skew(50deg);
	border-radius: 5px;
	transition: .5s;
	z-index: -1;
}
.faq-button a:hover::before {
	width: 155%;
	right: 0;
}
.accordion {
  max-width: 560px;
  margin: 0 auto 100px;
}
.accordion li {
  position: relative;
  list-style:none;
}
.accordion li p {
	display: none;
	padding: 10px 1px 30px;
	font-size: 15px;
	text-align: justify;
}
.accordion h3 {
	width: 100%;
	display: block;
	cursor: pointer;
	font-weight: 600;
	line-height: 3;
	font-size: 14px;
	font-size: 0.875rem;
	text-indent: 15px;
	user-select: none;
	font-size: 18px;
}
.accordion li h3 strong {
	height: 35px;
	width: 35px;
	background: #DB1D00;
	display: inline-block;
	line-height: 35px;
	border-radius: 50%;
	color: #fff;
	margin-right: 22px;
	position: relative;
	z-index: 1;
}
.accordion li h3 strong::before {
	position: absolute;
	content: "";
	left: -5px;
	top: -5px;
	height: 45px;
	width: 45px;
	line-height: 45px;
	background: #DB1D00;
	border-radius: 50%;
	opacity: 0.500;
	z-index: -1;
}
.accordion h3::after {
	width: 8px;
	height: 8px;
	border-right: 1px solid #DB1D00;
	border-bottom: 1px solid #DB1D00;
	position: absolute;
	right: 10px;
	content: " ";
	top: 17px;
	transform: rotate(-45deg);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.accordion p {
  font-size: 0.8125rem;
  line-height: 2;
  padding: 10px;
}
.faq-area .accordion p {
	border-top: 1px solid #DB1D00;
}
h3.active:after {
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
} 

/*<!-- ============================================================== -->
<!-- Start  Service-area style-two  Css -->
<!-- ============================================================== -->*/
.service-area.style-two {
    background: #fff;
}
.style-two .single-service-box {
    background: #F0F0F4;
    padding: 20px 24px 20px 40px;
    border-radius: 2px;
}
.style-two .single-service-box:hover {
    box-shadow: none;
}
.service-text {
    margin-left: 32px;
}
.service-title h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
	color: #050129;
	transition:.5s;
}
.service-title h3:hover {
    color: #DB1D00;
}


/*<!-- ============================================================== -->
<!-- Start  Pricing-area  Css -->
<!-- ============================================================== -->*/
.Pricing-area {
    padding: 60px 0 100px;
}
.Pricing-area .section-title {
    text-align: center;
    margin-bottom: 40px;
}
.pracing-single-box {
    box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
    background: #fff;
    padding: 41px 43px 63px;

}
span.price-table {
    position: absolute;
    right: 15px;
    background: #DB1D00;
    padding: 4px 20px;
    color: #fff;
    border-radius: 15px 0 15px;
    margin-top: -11px;
}
.pracing-icon {
    margin-bottom: 40px;
}
.pracing-table-title {
	border-bottom: 1px solid #DB1D00;
	margin-bottom: 18px;
}
.pracing-table-title span {
    display: inline-block;
    font-size: 25px;
    font-weight: 600;
    color: #050129;
}
.pracing-table-title h1 {
    font-size: 50px;
    display: inline-block;
}
.pracing-table-title p {
    color: #050129;
    opacity: 0.800;
}
.pracing-table-body ul li {
    font-size: 15px;
    list-style: none;
    text-align: left;
    padding: 6px 0;
}
.pracing-table-body ul li i {
    margin-right: 11px;
    text-align: left;
    color: #DB1D00;
}


.price-btn a {
    display: inline-block;
    background: #DB1D00;
    padding: 10px 30px;
    color: #fff;
    margin: 39px 70px;
    position: absolute;
    border-radius: 30px;
}
.price-btn a:hover {
    background: #E05639;
}
/*scrollUp*/
#scrollUp {
	bottom: 30px;
	background: #DB1D00;
	color: #fff;
	font-size: 30px;
	height: 46px;
	right: 49px;
	text-align: center;
	border-radius: 55px;
	width: 45px;
	line-height: 40px;
}
#scrollUp i {
	display: inline-block;
	font-size: 20px;
	color: #fff;
}
/*===========================
<-- 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: #9A241C;
    -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: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

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

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

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

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

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

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

/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(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); 
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.search-popup{
    width: 100%;
}
.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #db1d00;
    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;
}
.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: #DB1D00;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

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

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

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