/* ----------------------------------------------------------------
	Canvas: Integro
-----------------------------------------------------------------*/

/*@import url("css/fonts/font_stylesheet.css");*/ /* Using a Font url */

/* width */
::-webkit-scrollbar {
	width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgb(20, 20, 21);
	border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: rgba(20,20,21,1);
background: -moz-linear-gradient(top, rgba(20,20,21,1) 0%, rgba(255,117,72,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,20,21,1)), color-stop(100%, rgba(255,117,72,1)));
background: -webkit-linear-gradient(top, rgba(20,20,21,1) 0%, rgba(255,117,72,1) 100%);
background: -o-linear-gradient(top, rgba(20,20,21,1) 0%, rgba(255,117,72,1) 100%);
background: -ms-linear-gradient(top, rgba(20,20,21,1) 0%, rgba(255,117,72,1) 100%);
background: linear-gradient(to bottom, rgba(20,20,21,1) 0%, rgba(255,117,72,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141415', endColorstr='#ff7548', GradientType=0 );
	border-radius: 10px;
  }


:root {
	--cnvs-themecolor: #ff7548;
	--cnvs-themecolor-rgb: 255, 117, 72;
	--cnvs-secondary-color: #141415;
	--cnvs-primary-font: 'Manrope', sans-serif;
	--cnvs-secondary-font: 'PT Serif', serif;
	--cnvs-body-image: url(images/blur-bg.png);
}

.dark,
body.dark {
	--cnvs-body-bg: var(--cnvs-secondary-color);
	--cnvs-body-bg-boxed: var(--cnvs-secondary-color);
	--cnvs-footer-bg: var(--cnvs-secondary-color);

	--cnvs-header-sticky-bg: var(--cnvs-body-bg);

	background-image: var(--cnvs-body-image);
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	overflow-x: hidden;
	--webkit-backface-visibility: hidden;
}



#wrapper, #content {
    background: transparent;
}

#header,
.not-dark {
	--cnvs-header-bg: var(--cnvs-secondary-color);
	--cnvs-primary-menu-submenu-bg: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-font-color: var(--cnvs-secondary-color);
	--cnvs-primary-menu-submenu-hover-color: var(--bs-gray-900);
}

* {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.offcanvas {
	opacity: 0;
	transform: translateX(50%);
	transition: transform 0.3s ease-in-out,
					opacity 0.3s ease-in-out;
	will-change: transform;
}

.offcanvas.show {
	opacity: 1;
}

.offcanvas-backdrop.show {
	opacity: .7;
}

.fbox-icon i,
.bg-white-soft {
	background-color: rgba(255, 255, 255, 0.07);
}

.owl-carousel.full-width-view .owl-stage {
	padding-left: 0 !important;
}

.owl-carousel.full-width-view .owl-stage-outer {
	overflow: visible;
}

.owl-carousel {
	--cnvs-owl-nav-sizes: 46px;
	--cnvs-owl-nav-background: rgba(0,0,0,0.5);
	--cnvs-owl-nav-bg: var(--cnvs-themecolor);
}

.dark .owl-carousel .owl-nav [class*=owl-] span {
	border-color: rgba(255,255,255,0.15);
	color: #CCC;
	line-height: 30px;
}


.stack-cards {
  position: relative;
  display: block;
}

.stack-cards-item {
	background: #1f1f20;
	border-radius: 0.25rem;
	box-shadow: -5px 0 16px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
	margin-bottom: 10px;
}

/*
If you use SASS you can shorten this one here like this:

@for $i from 0 through 5 {
  &:nth-of-type(#{$i}) {
    transform: translate(calc((#{$i} - 1) * var(--cnvs-stack-card-offset)), calc((#{$i} - 1) * var(--cnvs-stack-card-offset)));
  }
}
*/

@media (min-width: 992px) {

	.content-wrap {
		overflow:visible;
	}

	.stack-cards {
		position: relative;
		display: block;
	}

	.sticky-title {
		position: sticky;
		top: 8rem;
	}

	.stack-cards > .stack-cards-item + .stack-cards-item {
		margin-top: 40vh;
	}

	.stack-cards-item {
		--cnvs-stack-card-offset: 1.5em;
		max-width: 53rem;
		position: sticky;
		top: 20rem;
		margin-bottom: 0px;
	}

	.stack-cards-item:nth-of-type(0) {
		transform: translateY(calc((0 - 1) * var(--cnvs-stack-card-offset))) scale(0.85);
	}
	.stack-cards-item:nth-of-type(1) {
		transform: translateY(calc((1 - 1) * var(--cnvs-stack-card-offset))) scale(0.88);
	}
	.stack-cards-item:nth-of-type(2) {
		transform: translateY(calc((2 - 1) * var(--cnvs-stack-card-offset))) scale(0.91);
	}
	.stack-cards-item:nth-of-type(3) {
		transform: translateY(calc((3 - 1) * var(--cnvs-stack-card-offset))) scale(0.94);
	}
	.stack-cards-item:nth-of-type(4) {
		transform: translateY(calc((4 - 1) * var(--cnvs-stack-card-offset))) scale(0.97);
	}
	.stack-cards-item:nth-of-type(5) {
		transform: translateY(calc((5 - 1) * var(--cnvs-stack-card-offset))) scale(1);
	}
}


.promo h2 {
    color: #FFF;
    font-size: 34px;
    line-height: 135%;
    font-weight: 600;
    letter-spacing: -1px;
}

.offcanvas + #wrapper {
	transition: transform .3s ease;
}

.offcanvas.show + #wrapper {
	transform: scale(0.99);
}

.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item > .menu-link {
	border-radius: 8px;
}



.form-control,
.form-select {
	font-family: var(--p-f-family);
    padding: 0.65rem 0.75rem;
    font-size: 1.125rem;
    border: 1px solid #e33a17;
	color:#FFF;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    background-color: transparent;
}

.component-flatpickr.form-control[readonly] {
    background-color: #F9F9F9;
}

.form-control:focus,
.form-select:focus,
.component-flatpickr.form-control[readonly]:focus {
	font-family: var(--p-f-family);
    padding: 0.65rem 0.75rem;
    font-size: 1.125rem;
    border: 1px solid #e33a17;
	color:#FFF;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    background-color: transparent;
}

.form-control::-moz-placeholder {
	color: #AAA;
	font-family: 'Roboto', Sans-serif;
	font-size: 0.925rem;
}
.form-control:-ms-input-placeholder {
	color: #AAA;
	font-family: 'Roboto', Sans-serif;
	font-size: 0.925rem;
}
.form-control::-webkit-input-placeholder {
	color: #AAA;
	font-family: 'Roboto', Sans-serif;
	font-size: 0.925rem;
}
/*
.widget_links:not(.widget-li-noicon) li::before {
	content: "•";
	font-size: 0.75rem;
	top: 2px;
}*/


/* garante referência pro absolute do charts */
.topo .col-lg-7 {
	position: relative;
}


/* Sócios: desktop mantém proporção e não distorce */
.topo .col-lg-7 > picture img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* ===== MOBILE ===== */
@media (max-width: 991.98px) {
	/* no mobile, “trava” uma altura visual semelhante ao que você queria */
	.img-chart {
		width: min(360px, 90vw);
		bottom: -260px;
		right: 0rem;
	}

	/* se você quiser o “efeito 400px” no mobile, faça assim (sem quebrar desktop) */
	.topo .col-lg-7 > picture {
		display: block;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

		.topo .col-lg-7 > picture img {
			width: 100%;
			height: auto;
		}
}


.bg-color-degrade, .bg-color-degrade #header-wrap {
    background: rgba(227, 59, 20, 1);
    background: -moz-linear-gradient(-45deg, rgba(227, 59, 20, 1) 0%, rgba(237, 46, 97, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(227, 59, 20, 1)), color-stop(100%, rgba(237, 46, 97, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(227, 59, 20, 1) 0%, rgba(237, 46, 97, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(227, 59, 20, 1) 0%, rgba(237, 46, 97, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(227, 59, 20, 1) 0%, rgba(237, 46, 97, 1) 100%);
    background: linear-gradient(135deg, rgb(227, 59, 20) 0%, rgba(237, 46, 97, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33b14', endColorstr='#ed2e61', GradientType=1 );
}


.background-img {
	position: absolute;
	width: 250px;
	top: -70px;
	left: -10px;
	z-index: 1;
}

.background-img.pos-right {
	top: 10px;
	left: auto;
	right: -20px;
}

.float-anim {
	animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0px);
	}
}


	/*! -- Stack Utilties -- */
	.hidden {
		display: none !important;
		visibility: hidden !important;
	  }
	  .visible-xs,
	  .visible-sm,
	  .visible-md,
	  .visible-lg {
		display: none !important;
	  }
	  .visible-xs-block,
	  .visible-xs-inline,
	  .visible-xs-inline-block,
	  .visible-sm-block,
	  .visible-sm-inline,
	  .visible-sm-inline-block,
	  .visible-md-block,
	  .visible-md-inline,
	  .visible-md-inline-block,
	  .visible-lg-block,
	  .visible-lg-inline,
	  .visible-lg-inline-block {
		display: none !important;
	  }
	  @media (max-width: 767px) {
		.visible-xs {
		  display: block !important;
		}
		table.visible-xs {
		  display: table;
		}
		tr.visible-xs {
		  display: table-row !important;
		}
		th.visible-xs,
		td.visible-xs {
		  display: table-cell !important;
		}
		.dark,
		body.dark {
		background-size: 120% 46%;
		}
		.img-chart{
			margin-left: -50%;
		}
	  }
	  @media (max-width: 767px) {
		.visible-xs-block {
		  display: block !important;
		}
	  }
	  @media (max-width: 767px) {
		.visible-xs-inline {
		  display: inline !important;
		}
	  }
	  @media (max-width: 767px) {
		.visible-xs-inline-block {
		  display: inline-block !important;
		}
	  }
	  @media (min-width: 768px) and (max-width: 991px) {
		.visible-sm {
		  display: block !important;
		}
		table.visible-sm {
		  display: table;
		}
		tr.visible-sm {
		  display: table-row !important;
		}
		th.visible-sm,
		td.visible-sm {
		  display: table-cell !important;
		}
	  }
	  @media (min-width: 768px) and (max-width: 991px) {
		.visible-sm-block {
		  display: block !important;
		}
	  }
	  @media (min-width: 768px) and (max-width: 991px) {
		.visible-sm-inline {
		  display: inline !important;
		}
	  }
	  @media (min-width: 768px) and (max-width: 991px) {
		.visible-sm-inline-block {
		  display: inline-block !important;
		}
	  }
	  @media (min-width: 992px) and (max-width: 1199px) {
		.visible-md {
		  display: block !important;
		}
		table.visible-md {
		  display: table;
		}
		tr.visible-md {
		  display: table-row !important;
		}
		th.visible-md,
		td.visible-md {
		  display: table-cell !important;
		}
	  }
	  @media (min-width: 992px) and (max-width: 1199px) {
		.visible-md-block {
		  display: block !important;
		}
	  }
	  @media (min-width: 992px) and (max-width: 1199px) {
		.visible-md-inline {
		  display: inline !important;
		}
	  }
	  @media (min-width: 992px) and (max-width: 1199px) {
		.visible-md-inline-block {
		  display: inline-block !important;
		}
	  }
	  @media (min-width: 1200px) {
		.visible-lg {
		  display: block !important;
		}
		table.visible-lg {
		  display: table;
		}
		tr.visible-lg {
		  display: table-row !important;
		}
		th.visible-lg,
		td.visible-lg {
		  display: table-cell !important;
		}
	  }
	  @media (min-width: 1200px) {
		.visible-lg-block {
		  display: block !important;
		}
	  }
	  @media (min-width: 1200px) {
		.visible-lg-inline {
		  display: inline !important;
		}
	  }
	  @media (min-width: 1200px) {
		.visible-lg-inline-block {
		  display: inline-block !important;
		}
	  }
	  @media (max-width: 767px) {
		.hidden-xs {
		  display: none !important;
		}
	  }
	  @media (min-width: 768px) and (max-width: 991px) {
		.hidden-sm {
		  display: none !important;
		}
	  }
	  @media (min-width: 992px) and (max-width: 1199px) {
		.hidden-md {
		  display: none !important;
		}
	  }
	  @media (min-width: 1200px) {
		.hidden-lg {
		  display: none !important;
		}
	  }
	  .visible-print {
		display: none !important;
	  }
	  @media print {
		.visible-print {
		  display: block !important;
		}
		table.visible-print {
		  display: table;
		}
		tr.visible-print {
		  display: table-row !important;
		}
		th.visible-print,
		td.visible-print {
		  display: table-cell !important;
		}
	  }
	  .visible-print-block {
		display: none !important;
	  }
	  @media print {
		.visible-print-block {
		  display: block !important;
		}
	  }
	  .visible-print-inline {
		display: none !important;
	  }
	  @media print {
		.visible-print-inline {
		  display: inline !important;
		}
	  }
	  .visible-print-inline-block {
		display: none !important;
	  }
	  @media print {
		.visible-print-inline-block {
		  display: inline-block !important;
		}
	  }
	  @media print {
		.hidden-print {
		  display: none !important;
		}
	  }
	  .text-left {
		text-align: left;
	  }
	  .text-right {
		text-align: right;
	  }
	  .text-center {
		text-align: center;
	  }
	  .text-justify {
		text-align: justify;
	  }
	  @media all and (min-width: 768px) and (max-width: 990px) {
		.text-left-sm {
		  text-align: left;
		}
		.text-right-sm {
		  text-align: right;
		}
		.text-center-sm {
		  text-align: center;
		}
	  }
	  @media all and (max-width: 767px) {
		.text-left-xs {
		  text-align: left;
		}
		.text-right-xs {
		  text-align: right;
		}
		.text-center-xs {
		  text-align: center;
		}
	  }


/* Animações só depois do primeiro paint */
@media (max-width: 991px) {
	.float-anim,
	.animated,
	.pulse {
		animation: none !important;
		transition: none !important;
	}
}