/*
	Template Name: Compras - Business & Consulting html landing page
	Author: webthemes
	Author Uri: https://www.templatemonster.com/authors/webthemes/
	Version: 1.2
*/
/*============================
 		Content table
 	--------------------
 		01. Google fonts
	02. Basic css
	03. Preloader Css
	04. Custom Header
	05. Landing Wrapper
	06. About Wrapper
	07. Service Wrapper
	08. Banner Wrapper
	09. Grow Wrapper
	10. Project Wrapper
	11. Expert Wrapper
	12. Ask Wrapper
	13. Pricing Wrapper
	14. Testimonials Wrapper
	15. News Wrapper
	16. Contact Wrapper
	17. Footer Wrapper
 ===============================*/

 /*======================
   01. Google fonts
========================*/
@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap');
/*======================
   02. Basic css
========================*/
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
	margin: 0;
	padding: 0;
}
body {
	line-height: 26px;
	font-family: 'Heebo', sans-serif;
	background-color: #fff;
	color: #687c94;
	font-size: 18px;
}
body.dark {
	background-color: #010019;
	color: #dedede;
}
ol,
ul {
	list-style: none; 
}
a:hover {
	text-decoration: none;
}
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
}
.section_padd {
	padding: 90px 0;
}
.title_1 {
	font-size: 38px;
	line-height: 48px;
	font-weight: bold;
	color: #0b1a39;
}
body.dark .title_1{
	color: #ffffff;
}
.title_2 {
	    font-size: 20px;
	max-width: 600px;
	line-height: 29px;
	margin: 20px auto -5px auto;
}
/*======================
   03. Preloader Css
========================*/
.preloader {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #ffffff;
	text-align: center;
}
.loader {
	width: 44px;
	height: 44px;
	position: absolute;
	border: 4px solid #fe4c1c;
	top: calc(50% - 22px);
	left: calc(50% - 22px);
	-webkit-animation: loader 2s infinite ease;
	animation: loader 2s infinite ease;
}
.loader-inner {
	width: 100%;
	background-color: #fe4c1c;
	-webkit-animation: loader-inner 2s infinite ease-in;
	animation: loader-inner 2s infinite ease-in;
}
@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes loader-inner {
	0% {
		height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
		height: 100%;
	}
	75% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}
@keyframes loader-inner {
	0% {
		height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
		height: 100%;
	}
	75% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}
/*======================
   04. Custom Header 
========================*/
header {
	position: fixed;
	top: 0;
	left: 0;
	height: 75px;
	z-index: 1024;
	width: 100%;
	-webkit-transition: background 0.3s;
	-o-transition: background 0.3s;
	transition: background 0.3s;
}
header.fixed_header {
	background-color: #030921;
}
header .logo img {
	    margin-top: 83px;
	max-width: 160px;
	width: 100%;
}
#menu {
	text-align: right;
}
#menu li {
	display: inline-block;
	color: #fff;
	padding: 0 15px;
}
#menu li a {
	font-size: 17px;
	letter-spacing: 0.5px;
	font-weight: 500;
	color: #fff;
	position: relative;
	padding: 0;
}
#menu li:last-child {
	padding-right: 0;
}
#menu li a::before {
	position: absolute;
	content: "";
	top: 13px;
	left: 0;
	height: 100%;
	width: 0;
	pointer-events: none;
	background-image: url(../img/wave.png);
	background-size: 43px;
	background-position: -200px center;
	-webkit-transition: width .7s;
	-o-transition: width .7s;
	transition: width .7s;
}
#menu li a.active::before,
#menu li a:hover::before {
	width: 100%;
}
.hamburger-menu {
	cursor: pointer;
	position: absolute;
	right: 15px;
	display: none;
	z-index: 999;
	top: -15px;
}
.hamburger-menu span {
	background: #ffffff;
	width: 30px;
	height: 3px;
	display: block;
	margin: 5px 0;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.hamburger-menu .line-top.current {
	-webkit-transform: translateY(200%) rotate(135deg);
	-ms-transform: translateY(200%) rotate(135deg);
	transform: translateY(200%) rotate(135deg);
}
.hamburger-menu .line-center.current {
	opacity: 0;
}
.hamburger-menu .line-bottom.current {
	-webkit-transform: translateY(-325%) rotate(-135deg);
	-ms-transform: translateY(-325%) rotate(-135deg);
	transform: translateY(-325%) rotate(-135deg);
}
/*======================
   05. Landing Wrapper
========================*/
.landing_wrapper {
	min-height: 100vh;
	width: 100%;
	padding-top: 145px;
	padding-bottom: 70px;
	background-size: cover;
	background-position: center center;
	background-color: #073683;
	position: relative;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 94%, 50% 100%, 25% 94%, 0 100%, 0% 30%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 94%, 50% 100%, 25% 94%, 0 100%, 0% 30%);
}
.landing_wrapper::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	height: 100%; 
}
.landing_wrapper .heading {
	font-size: 65px;
	line-height: 75px;
	font-weight: bold;
}
.landing_wrapper .sub_heading {
	max-width: 621px;
	font-size: 20px;
	line-height: 30px;
}
.landing_wrapper .home_btn_wrapper .button {
	margin: 8px;
}
/*video slider*/
.hero_slider .owl-item.active .landing_wrapper h1,
.hero_slider .owl-item.active .landing_wrapper p,
.hero_slider .owl-item.active .landing_wrapper a {
	top: 0;
	opacity: 1;
	position: relative;
}
.hero_slider .owl-item.active .landing_wrapper h1 {
	-webkit-transition: all 0.4s ease 0.4s;
	-o-transition: all 0.4s ease 0.4s;
	transition: all 0.4s ease 0.4s;
}
.hero_slider .owl-item.active .landing_wrapper p {
	-webkit-transition: all 0.6s ease 0.6s;
	-o-transition: all 0.6s ease 0.6s;
	transition: all 0.6s ease 0.6s;
}
.hero_slider .owl-item.active .landing_wrapper .home_btn_wrapper {
	-webkit-transition: all 0.7s ease 0.7s;
	-o-transition: all 0.7s ease 0.7s;
	transition: all 0.7s ease 0.7s;
	position: relative;
	top: 0;
	opacity: 1;
}
.hero_slider .owl-item .landing_wrapper h1,
.hero_slider .owl-item .landing_wrapper p {
	top: 50px;
	opacity: 0;
	position: absolute;
}
.hero_slider .owl-item .landing_wrapper .home_btn_wrapper {
	top: 100px;
	opacity: 0;
	position: absolute;
}
.hero_slider .owl-nav button {
	height: 50px;
	width: 40px;
	border-radius: 0px 5px 5px 0px;
	background: #fe4c1c ;
	color: #ffffff !important;
	font-size: 25px !important;
	position: absolute;
	top: calc(50% + 15px);
	left: 0;
}
.hero_slider .owl-nav button.owl-next {
	left: auto;
	right: 0;
	border-radius: 5px 0px 0px 5px;
}
/*======================
   06. About Wrapper
========================*/
.about_wrapper img {
	width: 100%;
}
.about_img_wrapper {
	padding: 0 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.about_img_wrapper::before {
	position: absolute;
	content: '';
	top: -20px;
	left: 0;
	border-top: 200px solid #fe4c1c;
	border-right: 250px solid transparent;
	z-index: -1;
}
.about_img_wrapper::after {
	position: absolute;
	content: '';
	bottom: -20px;
	right: 0;
	border-bottom: 200px solid #fe4c1c;
	border-left: 250px solid transparent;
	z-index: -1;
}
.about_wrapper .title_2 {
	margin-bottom: 20px;
	margin-left: 0;
}
.about_wrapper h4 {
	color: #0b1a39;
}
body.dark .about_wrapper h4 {
	color: #fff;
}
.title_top {
	color: #fe4c1c !important;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
}
.about_wrapper h4 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}
.about_wrapper span {
	font-size: 35px;
	color: #fe4c1c;
	font-weight: bold;
}
/*======================
   07. Service Wrapper
========================*/
.service_wrapper {
	background-color: #f7fcff;
}
body.dark .service_wrapper{
	background-color: #080a1d;
}
.service_box {
	text-align: center;
	padding: 40px 30px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	background-color: #ffffff;
}
body.dark .service_box {
	background-color: #010019;
	border: 1px solid #8698a9;
}
body.dark .service_box:hover{
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.service_box:hover {
	border-color: #fff;
	-webkit-box-shadow: 0px 4px 17px #eaeaea;
	box-shadow: 0px 4px 17px #eaeaea;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}
.service_box .service_icon {
	position: relative;
	margin: 0 auto;
	font-size: 32px;
	height: 80px;
	width: 80px;
	color: #fff;
	z-index: 1;
	text-align: center;
	line-height: 80px;
	/*border: 2px dashed #fe4c1c;*/
}
.service_box .service_icon::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 76px;
	height: 76px;
	border-radius: 15px;
	background-color: #7e1002f5;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: -1;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.service_box:hover .service_icon::before {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	background-color: #fe4c1c;
}
.service_box:hover .service_icon {
	border-color: transparent;
}
.service_box .title {
	font-size: 22px;
	color: #0b1a39;
	font-weight: bold;
}
body.dark .service_box .title{
	color: #ffffff;
}
.service_box .description {
	line-height: 32px;
}
/*======================
   08. Banner Wrapper
========================*/
.banner_wrapper {
	padding: 60px 0;
	background-size: cover;
	background-position: center center;
	position: relative;
	background-attachment: fixed;
}
.banner_wrapper .title_1,
.banner_wrapper .title_2 {
	max-width: 100%;
	color: #fff;
}
.banner_wrapper::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000000;
	width: 100%;
	height: 100%;
	opacity: 0.61;
}
.banner_button_wrapper {
	text-align: right;
}
/*======================
   09. Grow Wrapper
========================*/
.grow_wrapper .title_1 {
	margin-left: 0;
}
.grow_wrapper .title_2 {
	margin-left: 0;
}
.grow_wrapper .technics li {
	padding-left: 25px;
	position: relative;
	margin-top: 15px;
}
.grow_wrapper .technics li::before,
.grow_wrapper .technics li::after {
	position: absolute;
	content: '';
	left: 0;
	top: 7px;
	height: 10px;
	width: 10px;
	background-color: #fe4c1c;
}
.grow_wrapper .technics li::after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*======================
   10. Project Wrapper
========================*/
.project_wrapper {
	background-color: #f7fcff;
	overflow: hidden;
}
body.dark .project_wrapper{
	background-color: #080a1d;
}
.project_filter_menu ul li {
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	padding: 15px 0;
	margin: 0 15px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	line-height: 20px;
}
.project_filter_menu ul li:hover {
	color: #fe4c1c;
}
.project_filter_menu ul li::before,
.project_filter_menu ul li.active::before {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: -100%;
	width: 100%;
	height: 2px;
	background-color: #fe4c1c;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.project_filter_menu ul li:hover::before,
.project_filter_menu ul li.active::before {
	left: 0;
}
.project_filter_menu ul li.active {
	position: relative;
	color: #fe4c1c;
}
.project_items .item img {
	width: 100%;
}
.project_items .item .snake {
	display: block;
	cursor: crosshair;
}
.project_items .item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.51);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.project_items .item .overlay h3 {
	font-size: 27px;
	line-height: 24px;
}
/*======================
   11. Expert Wrapper
========================*/
.single_expert {
	position: relative;
	overflow: hidden;
	border: 1px solid #e9e9e9;
}
body.dark .single_expert{
	border: none;
}
.expert_details {
	position: absolute;
	bottom: -124px;
	width: 100%;
	background-color: rgb(255 255 255);
	z-index: 1; 
} 
body.dark .expert_details{
	background-color: #080a1d;
}
.expert_content { 
	padding: 13px 0 15px; 
}
.single_expert:hover .expert_details {
	bottom: -20px;
}
.single_expert:hover .expert_details {
	background-color: #303030;
	color: #fff;
	margin-bottom: 11px;
}
.single_expert:hover .expert_details h4 {
	color: #fff;
}
.expert_details h4 {
	font-size: 22px;
	color: #0b1a39;
	font-weight: 600;
	margin-bottom: 5px;
}
body.dark .expert_details h4{
	color: #ffff;
}
.expert_details p {
	font-size: 15px;
}
.expert_details ul {
	position: relative;
}
.expert_details ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 15px;
	height: 1px;
	width: calc(100% - 30px);
	background-color: #fff;
}
.expert_details ul li {
	display: inline-block;
	padding: 20px 10px;
}
.expert_details ul li a {
	font-size: 19px;
	color: #fff;
}
/*======================
   12. Ask Wrapper
========================*/
.ask_wrapper {
	background-color: #f7fcff;
}
body.dark .ask_wrapper{
	background-color: #080a1d;
}
.ask_wrapper .button {
	font-size: 16px;
	background-color: #fe4c1c;
	color: #fff;
	width: 100%;
	text-align: left;
	border-color: #dbe4f0;
	padding: 0 50px 0 25px;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	line-height: 30px;
	position: relative;
	font-weight: 600;
}
.ask_wrapper .button[aria-expanded="false"] {
	background-color: transparent;
	color: #fff !important;
}
body.dark .ask_wrapper .button[aria-expanded="false"] {
	color: #dedede;
}
.ask_wrapper .button[aria-expanded="true"] {
	border-color: #fe4c1c;
}
.ask_wrapper .button:hover {
	background-color: #fe4c1c;
	color: #fff;
	border-color: #fe4c1c;
}
.ask_content {
	padding: 30px 25px 0;
}
.accordion .button .fa-check {
	background-color: #fff;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	line-height: 25px;
	text-align: center;
	font-size: 12px;
	color: #fe4c1c;
	position: absolute;
	right: 20px;
	top: 14px;
	opacity: 0;
}
.accordion .button .btn_content {
	overflow: hidden;
}
.accordion .button .btn_content span {
	display: block;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
}
.accordion .button[aria-expanded="true"] .fa-check {
	opacity: 1;
}
/*======================
   13. Pricing Wrapper
========================*/
.tabs .nav-link {
	border-radius: 28px;
	text-align: center;
	color: #000000;
	display: inline-block;
	font-size: 18px;
	text-transform: capitalize;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	padding: 10px 35px;
	font-weight: 500;
}
body.dark .tabs .nav-link{
	color: #fff;
}
.tabs .nav-link.active {
	background-color: #fe4c1c;
	color: #fff;
}
.icon-list-item {
	position: relative;
	padding-left: 35px;
}
.icon-list-item .icon {
	color: #fe4c1c;
	background-color: #ffece6;
	display: inline-block;
	height: 18px;
	width: 18px;
	text-align: center;
	font-size: 11px;
	line-height: 2;
	position: absolute;
	left: 0;
	top: 3px;
}
.pricing_wrapper .card-body h2 {
	font-size: 50px;
	font-weight: 600;
	margin: 15px 0;
}
.pricing_wrapper .card-body h4 {
	color: #051229;
	margin-bottom: 5px;
	font-weight: 700;
	font-size: 22px;
}
body.dark .pricing_wrapper .card-body h4{
	color: #ffff;
}
.pricing_wrapper .card-body .button {
	height: 48px;
	line-height: 48px;
}
body.dark .card{
	background-color: #010019;
	border: 1px solid #8698a9;
}
/*===========================
   14. Testimonials Wrapper
=============================*/
.testi_wrapper {
	background-color: #f7fcff;
}
body.dark .testi_wrapper{
	background-color: #080a1d;
}
.testi_carousel .item .single_client {
	padding: 35px;
	border: 2px solid #dddddd;
	border-radius: 10px;
	line-height: 24px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.testi_carousel .item:hover .single_client {
	border-color: #fe4c1c;
}
.testi_carousel .item:hover i {
	color: #fe4c1c;
}
.testi_carousel .item i {
	font-size: 50px;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}
.testi_carousel .item .client_feedback {
	font-weight: 600;
	letter-spacing: 0.1px;
}
.testi_carousel .item .client_img {
	height: 64px;
	width: 64px;
	border-radius: 50%;
	background-color: #de8893;
	margin-right: 20px;
	overflow: hidden;
}
.testi_carousel .single_client .media-body h4 {
	font-size: 20px;
	font-weight: 600;
	color: #0b1a39;
}
body.dark .testi_carousel .single_client .media-body h4 {
	color: #fff;
}
.testi_carousel .single_client .media-body p {
	margin-top: 4px;
}
/*==================
   15. News Wrapper
====================*/
.news_wrapper .single_news {
	line-height: 24px;
	border: 1px solid #edeaea;
	padding: 30px;
	-webkit-box-shadow: 0px 0px 15px #f3f3f3;
	box-shadow: 0px 0px 15px #f3f3f3;
	border-radius: 10px;
	overflow: hidden;
}
body.dark .news_wrapper .single_news{
	-webkit-box-shadow: none;
	        box-shadow: none;
	border-color: #8698a9;
}
.news_wrapper .single_news .overflow-hidden {
	border-radius: 10px;
}
.news_wrapper .single_news img {
	width: 100%;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.news_wrapper .single_news:hover img {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.news_wrapper .single_news h4 {
	font-size: 20px;
	color: #0b1a39;
	font-weight: 600;
}
body.dark .news_wrapper .single_news h4{
	color: #fff;
}
.news_wrapper .single_news p {
	font-size: 17px;
}
.news_wrapper .single_news a {
	display: block;
	height: 45px;
	line-height: 45px;
	width: 145px;
}
/*==================
   16. Contact Wrapper
====================*/
.contact_wrapper {
	background-image: url(../img/map.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
.contact_wrapper::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.9;
	border-top: 1px solid #e8e8e8;
}
body.dark .contact_wrapper::before{
	background-color: #080a1d;
	border-top: 1px solid #8698a9;
	border-bottom: 1px solid #8698a9;
}
aside {
	border: 1px solid #e6e6e6;
	padding: 30px;
	height: 100%;
	background-color: #ffffff;
}
body.dark aside{
	border-color: #8698a9;
	background-color: transparent;
}
aside h4 {
	line-height: 0.8;
	border-bottom: 1px solid #d6cece;
	padding-bottom: 15px;
	color: #000000;
}
body.dark aside h4{
	color: #fff;
}
aside .address ul li {
	border-bottom: 1px solid #f3f0f0;
	margin: 15px 0 0;
	padding-bottom: 15px;
}
aside .address ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
aside .address ul li a {
	display: block;
	color: #687c94;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
body.dark aside .address ul li a{
	color: #dedede;
}
aside .address ul li a:hover,
body.dark aside .address ul li a:hover {
	color: #fe4c1c;
}
aside ul li strong {
	color: #000000;
	position: relative;
	padding-left: 15px;
	margin-bottom: 5px;
	display: inline-block;
}
body.dark aside ul li strong{
	color: #fff;
}
aside ul li strong::before {
	position: absolute;
	content: '';
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background-color: #fe4c1c;
}
.inputBox,
.textBox {
	height: 45px;
	width: 100%;
	padding: 0 15px;
	border: 1px solid #e6e6e6;
	background-color: #ffffff;
	font-size: 16px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
body.dark .inputBox,
body.dark .textBox {
	background-color: transparent;
	color: #fff;
	border-color: #8698a9;
}
.textBox {
	height: 170px;
	resize: none;
	padding-top: 10px;
}
.inputBox:focus,
.textBox:focus {
	border-color: #fe4c1c;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.contact_wrapper .button {
	width: 100%;
	border-radius: 0;
}
/*====================
   17. Footer Wrapper
======================*/
footer {
	background-color: #030921;
	font-size: 16px;
	color: #fff;
	padding: 10px 0 30px 0;
}
footer .social_icons li {
	display: inline-block;
	margin-left: 5px;
}
footer .social_icons li:first-child {
	margin-left: 0px;
}
footer .social_icons li a {
	height: 40px;
	width: 40px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
footer .social_icons li a:hover {
	background-color: #fe4c1c;
}
.back-to-top.button {
	font-size: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	display: none;
	position: fixed;
	bottom: 80px;
	right: 10px;
	z-index: 1000;
}
/*demo css*/
.demo_wrapper {
	padding: 30px 0 60px 0;
}
.demo_box {
	display: inline-block;
	text-align: center;
	border: 1px solid #b5b5b5;
	font-size: 22px;
	font-weight: 600;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.demo_box:hover {
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	    transform: translateY(-10px);
	-webkit-box-shadow: 0 10px 15px #d4d3d3;
	box-shadow: 0 10px 15px #d4d3d3;
}
.demo_box p {
	padding: 20px 15px;
	color: #fe4c1c;
}

.landing_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Ajuste o valor para mais ou menos escuro */
    z-index: 1;
}

.landing_wrapper > .container {
    position: relative;
    z-index: 2; /* Garante que o texto fique acima do overlay escuro */
}


.landing_wrapper {
    position: relative !important;
}