/*
Theme Name: Defoco 2027
Theme URI: https://www.peru-baboon-814226.hostingersite.com
Description: Tema institucional da Defoco, com fundo animado por sequência de frames controlada pelo scroll.
Author: Defoco
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: defoco
Tags: one-page, dark, custom-menu
*/

/* =========================================================================
   1. Tipografia
   -------------------------------------------------------------------------
   "Helvetica Neue" e "Myriad Pro" são fontes comerciais e NÃO acompanham o
   tema — por isso os @font-face antigos geravam 404 no console. Aqui usamos
   apenas local(), que aproveita a fonte caso ela esteja instalada e cai no
   fallback silenciosamente quando não estiver.

   Para self-hospedar (exige licença webfont): coloque os arquivos em
   /assets/fonts/ e descomente os url() abaixo.
   ====================================================================== */


@font-face {
    font-family: 'Myriad Pro Condensed';
    src: url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.eot');
    src: url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.woff2') format('woff2'),
        url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.woff') format('woff'),
        url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.ttf') format('truetype'),
        url('/wp-content/themes/defoco/assets/fonts/MyriadPro-BoldCond.svg#MyriadPro-BoldCond') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.eot');
    src: url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.woff2') format('woff2'),
        url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.woff') format('woff'),
        url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.ttf') format('truetype'),
        url('/wp-content/themes/defoco/assets/fonts/Inter28pt-Regular.svg#Inter28pt-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.myriad{
	font-family: 'Myriad Pro Condensed' , sans-serif !important;
}

.text-dark{
	color: #343a40 !important;
}

.text-black{
	color: #000000 !important;
}

/* =========================================================================
   2. Tokens
   ====================================================================== */

:root {
	--bg-dark: #000000;
	--text-main: #ffffff;
	--text-muted: #a3a3a3;          /* era #999: contraste 5.0:1 no preto (AA) */
	--text-white: #ffffff;          /* era #999: contraste 5.0:1 no preto (AA) */
	
	--text-gray: #c4c4c4;           /* variável usada no CSS antigo e nunca definida */
	--text-orange: #ef5a24;
	--accent-orange: #ef5a24;
	--accent-orange-hover: #d9491a;

	--card-bg: rgba(12, 12, 12, 0.82);
	--card-border: rgba(255, 255, 255, 0.1);
	--card-border-hover: rgba(239, 90, 36, 0.5);
	--panel-bg: rgba(10, 10, 10, 0.72);
	--glass-bg: rgba(255, 255, 255, 0.04);

	--font-heading: 'Myriad Pro Condensed', sans-serif;
	
	--font-body: 'Inter 28pt', sans-serif;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 24px;

	--header-h: 84px;
	--container: 1200px;
}

/* =========================================================================
   3. Base
   ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;	
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* clip (e não hidden) evita criar um contêiner de rolagem que quebra
	   position: sticky no header. */
	overflow-x: clip;
}

body {
	background-color: var(--bg-dark);
	color: var(--text-main);
	font-family: var(--font-body);
	font-weight: 400;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
canvas {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

/* Compensa o header sticky ao navegar por âncoras. */
[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.d-none{
	display: none !important;
}

@media(min-width: 1200px) and (max-width: 1800px){
		.p-1{
		padding: 30px 20px !important;
	}
}


.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--accent-orange);
	color: #fff;
	text-decoration: none;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--accent-orange);
	outline-offset: 3px;
}

/* =========================================================================
   4. Fundo animado (canvas)
   ====================================================================== */

.animation-container {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 0;
	pointer-events: none;
	background: var(--bg-dark);
	/* Isola o repaint do canvas do resto da página. */
	contain: layout paint style;
}

#video-canvas {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

#video-canvas.is-loaded {
	opacity: 0.6;
}

.content-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* =========================================================================
   5. Tipografia utilitária
   ====================================================================== */

h1, h2, h3, h4,
.logo, .big-number, .stat-number,
.hero-title, .section-title, .section-subtitle, .step-number, .marker-number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: condensed;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.text-orange { color: var(--text-orange); }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #8b8b8b; }
.text-center { text-align: center; }
.text-left { text-align: left; }

.small-text { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.tiny-text { font-size: 1rem; letter-spacing: 1px; color: var(--text-white);}
.category { font-size: 0.75rem; letter-spacing: 1px; font-weight: 500; }


.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }

.flex { display: flex; }
.justify-between { justify-content: space-between; }
.items-end { align-items: flex-end; }
.inline-block { display: inline-block; }

/* =========================================================================
   6. Botões
   ====================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 100px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	background: none;
}

.btn .arrow-right { font-size: 1.1em; }
.btn-block { width: 100%; }

.btn-solid-orange {
	background-color: var(--accent-orange);
	color: #fff;
	border-color: var(--accent-orange);
}
.btn-solid-orange:hover,
.btn-solid-orange:focus-visible {
	background-color: var(--accent-orange-hover);
	border-color: var(--accent-orange-hover);
}

.btn-outline-orange {
	color: var(--accent-orange);
	border-color: var(--accent-orange);
}
.btn-outline-orange:hover,
.btn-outline-orange:focus-visible {
	background-color: rgba(239, 90, 36, 0.12);
}

.btn-outline-border {
	color: var(--text-main);
	border-color: var(--card-border);
}
.btn-outline-border:hover,
.btn-outline-border:focus-visible {
	border-color: var(--text-orange);
	color: var(--text-orange);
}

.btn-text {
	color: var(--text-main);
	border: none;
	padding: 12px 0;
}
.btn-text:hover,
.btn-text:focus-visible { color: var(--text-orange); }

/* =========================================================================
   7. Layout
   ====================================================================== */

.section,
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding: 80px 20px;
}


@media(max-width: 768px){
	.section,
	.container {	
		padding: 40px 20px !important;
	}
}

.container { padding-block: 0; }

.section-title, .section-subtitle{
	font-size: clamp(1.85rem, 5vw, 3.25rem);
}

.section-title {
	line-height: 1;
	margin-bottom: 32px;
}

.section-subtitle {
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-orange);
	font-weight: 700;
	margin-bottom: 8px;
}

/* Superfície padrão dos cards — sem backdrop-filter (ver nota de performance
   no bloco 16). */
.surface {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
}

/* =========================================================================
   8. Header
   ====================================================================== */

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 20px 40px;
	min-height: var(--header-h);
	position: sticky;
	top: 0;
	z-index: 100;
/* 	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); */
	
	background-color: var(--card-bg);
}

img{
	object-fit: contain !important;
	height: auto;
	max-height: 100%;
	max-width: 100%;
}

@media(min-width: 992px){
	.header_logo_menu{
		transform: scale(1.2) translateX(20%);
	}
}

.logo img { height: 28px; width: auto; }

.logo-small {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}

.logo-small img { height: 32px; width: auto; }

.nav__list {
	display: flex;
	gap: 24px;
	list-style: none;
}

.nav__link,
.nav a {
	color: #fff;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 1px;
	transition: color 0.2s;
	text-transform: uppercase;
}

.nav a{
	font-size: 1rem !important;
}

.nav__link:hover,
.nav a:hover { color: var(--text-orange); }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   9. Hero
   ====================================================================== */

.hero {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero-title {
	font-size: clamp(2.75rem, 7vw, 6.25rem);
	line-height: 0.95;
	margin-bottom: 24px;
}
.hero-desc {
/* 	font-size: 1rem; */
	font-size: clamp(1rem, 3vw, 1.25rem);
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: 40px;
	max-width: 720px;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

/* =========================================================================
   10. Seções de conteúdo
   ====================================================================== */

/* Partner */
.partner {
	display: flex;
	justify-content: space-between;
	gap: 60px;
	align-items: flex-start;
}
.partner-left { flex: 1; }
.partner-right { flex: 1.2; }

.partner-desc {
	padding: 24px;
	border-radius: var(--radius-sm);
	margin-bottom: 32px;
}
.partner-desc strong {
	font-size: 1rem;
	color: #fff;
	font-weight: 500;
}
.partner-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.partner-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.icon-orange { color: var(--text-orange); flex-shrink: 0; }
.partner-item h4 { font-size: 1.2rem; line-height: 1; }
.partner-item h3 { 
/* 	font-size: 1.2rem;  */
	font-size: clamp(1.2rem, 2vw, 1.75rem);
	line-height: 1; 
}

.icon-orange svg{
	min-height: 48px;
	min-width: 48px;
}

/* Painéis grandes (mantêm o vidro) */
.problem,
.impact {
	background: var(--panel-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	padding: 64px 40px;
}

.problem-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.problem-card {
	border-radius: var(--radius-md);
	padding: 32px;
	display: flex;
	flex-direction: column;
}
.big-number {
/* 	font-size: 3.5rem; */
	font-size: 38px;
	line-height: 1;
	border: 2px solid var(--text-orange);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.icon-large { margin-bottom: 24px; }
.problem-card h4 { font-size: 1.4rem; line-height: 1; }
.problem-list { list-style: none; }
.problem-list li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 8px;
}
.problem-list li::before {
	content: '•';
	color: var(--text-orange);
	position: absolute;
	left: 0;
	top: 0;
}

.problem-card-content h3,
.problem-card-content h4{
	font-size: clamp(1.2rem, 2vw, 1.75rem);
}

.problem-card{
	display: grid;
	grid-template-rows: 120px auto;
}

.problem-card__icon{
	display: grid;
    margin: 0 auto;
    align-items: center;
    padding-bottom: 25px;
}


/* Experience */
.experience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	border-radius: var(--radius-md);
	padding: 40px;
}
.stat-item { display: flex; gap: 16px; align-items: flex-start; }
.stat-icon { color: var(--text-orange); flex-shrink: 0; }
.stat-number { font-size: 2.5rem; line-height: 0.9; margin-bottom: 8px; }

/* Solutions */
.solutions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.solution-card {
	border-radius: var(--radius-sm);
	padding: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.solution-icon { color: var(--text-orange); margin-bottom: 16px; }
.solution-card h4 { font-size: 1.2rem; }

.solution-content h3,
.solution-content h4{
	font-size: clamp(1.2rem, 2vw, 1.75rem) !important;
}

/* Methodology */
.methodology { padding-block: 60px; }
.methodology-card {
	border-radius: var(--radius-sm);
	padding: 48px;
}
.methodology-card .section-title { text-align: left; margin-bottom: 16px; }
.methodology-lead {
	color: var(--text-gray);
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 900px;
	margin-bottom: 48px;
}
.methodology-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
	margin-top: 48px;
}
.methodology-step { display: flex; flex-direction: column; }
.step-line {
	height: 1px;
	background: var(--card-border);
	margin-bottom: 24px;
}
.step-number {
	font-size: 3.5rem;
	color: var(--text-orange);
	line-height: 1;
	margin-bottom: 16px;
}
.step-title {
	font-size: 1rem;
	color: #fff;
	margin-bottom: 12px;
}
.step-text {
	font-size: 0.9rem;
	color: var(--text-gray);
	line-height: 1.5;
}

/* Technology timeline */
.tech-timeline-container {
	position: relative;
	padding-left: 50px;
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.tech-timeline-line-main {
	position: absolute;
	left: 29px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, transparent, var(--text-orange) 10%, var(--text-orange) 90%, transparent);
	box-shadow: 0 0 10px var(--text-orange);
	z-index: 1;
}
.tech-timeline-step {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}
.tech-timeline-marker {
	position: absolute;
	left: -54px;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #000;
	border: 2px solid var(--text-orange);
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 12px #000, 0 0 20px 12px rgba(239, 90, 36, 0.35);
	z-index: 3;
}

@media(max-width: 768px){
	.tech-timeline-marker{
		width: 35px;
		height: 35px;
	}
	
	.tech-timeline-marker{
		left: -25px;	
	}
	
	.tech-timeline-line-main{
		left: 32px;
	}
}

.tech-timeline-marker::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px dashed rgba(239, 90, 36, 0.5);
	animation: defoco-rotate 10s linear infinite;
}
@keyframes defoco-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.marker-number { 
	color: var(--text-orange); 
	font-size: clamp(1.2rem, 4vw, 2.56rem) !important;
}

.tech-timeline-connector {
	position: absolute;
	left: 25px;
	width: 25px;
	height: 2px;
	background: var(--text-orange);
	box-shadow: 0 0 8px var(--text-orange);
	z-index: 1;
}
.tech-timeline-connector::after {
	content: '';
	position: absolute;
	right: -4px;
	top: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-orange);
	box-shadow: 0 0 5px var(--text-orange);
}
.tech-timeline-card {
	margin-left: 50px;
	border-radius: var(--radius-md);
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.tech-timeline-card:hover {
	border-color: var(--text-orange);
	transform: translateX(5px);
}
.tech-timeline-card h4 {
	font-size: 1.3rem;
	color: #fff;
	letter-spacing: 1px;
}
.tech-timeline-card .small-text {
	font-size: 0.9rem;
	color: var(--text-gray);
}

/* Cases */
.cases-header {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.cases-header .section-title { margin-bottom: 0; }

.cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}
.case-card {
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: transform 0.3s;
	display: flex;
	flex-direction: column;
}
.case-card:hover { transform: translateY(-5px); }
.case-card picture { display: block; }
.case-img-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-bottom: 1px solid var(--card-border);
	background: #111;
}
.case-info {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.case-info h4 { font-size: 1.2rem; margin-top: 4px; }
.case-link {
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 500;
	margin-top: auto;
	padding-top: 12px;
}


.case-info .category {
	font-weight: bold;
	margin-bottom: 10px;
}

.case-link.text-orange{display: none;}

/* Impact */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	text-align: center;
}
.impact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 24px;
}
.impact-icon { margin-bottom: 16px; }
.impact-content h4 { font-size: 2.5rem; line-height: 1; }

/* Brands */

@media(max-width: 768px){
	section.brands {
/* 		background-color: var(--card-bg); */
		
		position: relative;
		background: var(--card-bg);
		border: 1px solid var(--card-border);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(0, 0, 0, 0.5);
		border-radius: var(--radius-md);
		margin: 0 20px;
	}
}

.brands-carousel-container {
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: 45px 0 40px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.brands-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	min-width: 100%;
	align-items: center;
	animation: defoco-scroll-brands 40s linear infinite;
	will-change: transform;
}

@media(max-width: 768px){
	.brands-carousel-track{
		animation: defoco-scroll-brands 18s linear infinite !important;
	}
}

.brand-logo {
	flex-shrink: 0;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 40px;
}
.brand-logo picture {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.brand-logo img {
	max-width: 260px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.55;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.brand-logo:hover img,
.brand-logo:hover picture img {
	filter: grayscale(0%);
	opacity: 1;
}
@keyframes defoco-scroll-brands {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================================
   11. Footer
   ====================================================================== */

footer{
	background-color: #ff6a00 !important;
	position: relative;
	
	z-index: 2;
}

.footer {
	max-width: var(--container);
	margin-inline: auto;
	padding: 80px 20px 40px;
}
.footer__top {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	margin-bottom: 64px;
}
.footer__intro { flex: 1 1 320px; }
.footer__form { flex: 1 1 320px; }
.footer__eyebrow { margin-bottom: 24px; }
.footer__headline {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.1;
	margin-bottom: 16px;
}
.footer__subheadline {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	line-height: 1.2;
	color: var(--text-gray);
	margin-bottom: 24px;
}
.footer__cta {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 1.05rem;
	margin-bottom: 48px;
	text-transform: uppercase;
}
.footer__cta:hover { color: var(--text-orange); }

.footer__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin-bottom: 32px;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
}
.footer__contacts a {
	text-decoration: none;
}
.footer__contacts a:hover { color: var(--text-orange); }
.footer__logo img { height: 40px; width: auto; }

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid var(--card-border);
	padding-top: 24px;
}
.footer-bottom .logo-small { margin-bottom: 0; }
.footer-links__list {
	display: flex;
	gap: 24px;
	list-style: none;
}
.footer-links a {
	text-decoration: none;
	color: var(--text-muted);
	transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }

/* =========================================================================
   12. Formulário
   ====================================================================== */

.glass-panel {
	background: var(--glass-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--card-border);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	padding: 40px;
}
.contact-form-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.form-field { margin: 0; }
.form-input,
.form-textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	padding: 16px;
	color: #fff;
	font-family: inherit;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.3s;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.form-input:focus,
.form-textarea:focus { border-color: var(--text-orange); }
.form-textarea { resize: vertical; min-height: 120px; }

/* =========================================================================
   13. Fallback (index.php)
   ====================================================================== */

.section--fallback { padding-block: 140px; }
.entry-list {
	display: grid;
	gap: 24px;
	margin-top: 32px;
}
.entry-card { padding: 24px; border-radius: var(--radius-md); }
.entry-card__title { font-size: 1.4rem; margin-bottom: 8px; }
.entry-card__title a { text-decoration: none; }
.entry-card__title a:hover { color: var(--text-orange); }

/* =========================================================================
   14. Glow nos cards
   ====================================================================== */

.glow-effect {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(0, 0, 0, 0.5);
	border-radius: var(--radius-md);
}
.glow-effect::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: radial-gradient(
		400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		rgba(239, 90, 36, 0.8),
		transparent 40%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 2;
}
.glow-effect:hover::before { opacity: 1; }

.glow-effect{
	p, strong, li{
		font-size: clamp(1rem, 3vw, 1.2rem);
	}
}

.fs-1{
	font-size: clamp(1rem, 3vw, 1.2rem) !important;
}

.fs-2{
	font-size: clamp(1rem, 3vw, 1.5rem) !important;
}

.fs-3{
	font-size: clamp(1.2rem, 2vw, 1.75rem) !important;
}

.fs-4{
	font-size: clamp(1.25rem, 2vw, 1.85rem) !important;
}

.fs-5{
	font-size: clamp(2.25rem, 3vw, 2.3rem) !important;
}

.text-center{
	text-align: center !important;
}

.text-white{
	color: var(--text-white) !important;
}

/* =========================================================================
   15. Responsivo
   ====================================================================== */

@media (max-width: 1024px) {
	.partner { flex-direction: column; gap: 40px; }
	.problem, .impact { padding: 48px 24px; }
	.methodology-card { padding: 32px; }
	.header { padding: 16px 24px; }
}

@media (max-width: 900px) {
	.nav-toggle { display: flex; }

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.96);
		border-top: 1px solid var(--card-border);
		border-bottom: 1px solid var(--card-border);
		display: none;
	}
	.nav-is-open .nav { display: block; }
	.nav__list {
		flex-direction: column;
		gap: 0;
		padding: 8px 24px 16px;
	}
	.nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
	.nav__link { display: block; padding: 14px 0; font-size: 0.8125rem; }

	.header { position: sticky; }
	.header__cta { display: none; }
}

@media (max-width: 768px) {
	.section, .footer { padding-inline: 16px; }
	.hero { min-height: 70vh; }
	.methodology-steps { gap: 24px; }
	.tech-timeline-container { padding-left: 40px; gap: 32px; }
	.tech-timeline-card { margin-left: 40px; padding: 20px; }
	.partner-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.glass-panel { padding: 24px; }
	
	.partner-left,
	.btn{
		margin: 0 auto;
	}
	
	.partner-item{
		justify-content: center;
	}
	
	.solutions-grid,
	.methodology-steps,
	.cases-grid,
	.impact-grid,
	.experience-grid{
		row-gap: 50px;
	}		
	

	.solution-card{
		row-gap: 20px;
		padding: 40px 10px;
	}
	
	.impact-item{
		row-gap: 10px;
		padding: 40px 10px;
	}
	
	.methodology-step{
		justify-content: center;
		text-align: center;
	}
	
	.hero{
	 	margin: 0 15px;
	}
	
	.footer-btn-black{
		padding: 16px 20px !important;
		margin: 0 auto;
		max-width: 312px;
	}
	
}

/* =========================================================================
   16. Performance & preferências
   -------------------------------------------------------------------------
   O canvas de fundo repinta a cada frame do scroll. Cada elemento com
   backdrop-filter obriga o navegador a refazer o blur da área atrás dele
   nesse mesmo instante — com ~40 cards isso é o que travava a rolagem.
   Aqui o efeito fica restrito a 3 painéis grandes e só no desktop.
   ====================================================================== */

@media (min-width: 1025px) and (hover: hover) {
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.problem,
		.impact,
		.glass-panel {
			-webkit-backdrop-filter: blur(20px) saturate(150%);
			backdrop-filter: blur(20px) saturate(150%);
		}
	}
}

/* Preferência de movimento reduzido.
   ATENÇÃO: a versão anterior usava `*{ animation: ... !important }` e
   `.brands-carousel-track { animation: none }`, o que PARAVA o carrossel de
   marcas por completo — inclusive quando o "Emulate prefers-reduced-motion"
   do DevTools ficava ligado. Aqui o efeito é atenuado, não desligado:
   o carrossel roda 3x mais devagar e as transições ficam curtas. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: smoth; }

/* 	.brands-carousel-track { animation-duration: 120s; }
	.tech-timeline-marker::after { animation-duration: 30s; }

	.case-card:hover,
	.tech-timeline-card:hover { transform: none; }

	.btn,
	.nav__link,
	.glow-effect::before,
	.brand-logo img,
	#video-canvas {
		transition-duration: 0.01ms;
	} */
}

/* =========================================================================
   15. Efeitos Infinity Wall & Bubbles Footer
   ====================================================================== */

/* 
.infinity-wall {
			--wall-height: 650px;
			--wall-perspective: 780px;
			--wall-height-image: 900px;
			--wall-image-ratio: 2.4;
			--wall-width: 420%;
			--wall-rx: 3deg;
			--wall-ry: 20deg;
			--wall-speed: 18s;
			--wall-fade-near: 8%;
			--wall-fade-far: 26%;
			--wall-tile: calc(var(--wall-height-image) * var(--wall-image-ratio));

			position: relative;
			width: 100%;
			max-width: 1920px;
			height: var(--wall-height);
			margin: 0 auto;
			overflow: hidden;
			background: #000;
			perspective: var(--wall-perspective);
			perspective-origin: 50% 50%;
		}

		.infinity-wall__pattern {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;
			width: var(--wall-width);
			height: var(--wall-height-image);
			background: url('/wp-content/uploads/2026/08/rodape-site_v5.webp')
				repeat-x
				center / auto 60%;
			transform-origin: 50% 50%;
			transform:
				translate(-50%, -50%)
				rotateX(var(--wall-rx))
				rotateY(var(--wall-ry));
			animation: infinity-wall-scroll var(--wall-speed) linear infinite;
			will-change: transform;
			backface-visibility: hidden;
			pointer-events: none;
		}

		.infinity-wall::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 2;
			pointer-events: none;
			background:
				linear-gradient(90deg,
					#000 0%,
					rgba(0, 0, 0, 0) var(--wall-fade-near),
					rgba(0, 0, 0, 0) calc(100% - var(--wall-fade-far)),
					rgba(0, 0, 0, 0.9) calc(100% - 4%),
					#000 100%),
				linear-gradient(180deg,
					#000 0%,
					rgba(0, 0, 0, 0) 15%,
					rgba(0, 0, 0, 0) 85%,
					#000 100%);
		}

		@keyframes infinity-wall-scroll {
			from {
				transform:
					translate(-50%, -50%)
					rotateX(var(--wall-rx))
					rotateY(var(--wall-ry))
					translate3d(0, 0, 0);
			}
			to {
				transform:
					translate(-50%, -50%)
					rotateX(var(--wall-rx))
					rotateY(var(--wall-ry))
					translate3d(calc(var(--wall-tile) * -1), 0, 0);
			}
		}


		@media (max-width: 1024px) {
			.infinity-wall {
				--wall-height: 520px;
				--wall-height-image: 720px;
				--wall-perspective: 640px;
				--wall-ry: 24deg;
				--wall-fade-far: 22%;
			}
		}

		@media (max-width: 768px) {
			.infinity-wall {
				--wall-height: 420px;
				--wall-height-image: 560px;
				--wall-perspective: 500px;
				--wall-ry: 20deg;
				--wall-width: 520%;
				--wall-fade-far: 18%;
			}
		}
	
		@media (max-width: 480px) {
			.infinity-wall {
				--wall-height: 400px;
				--wall-height-image: 420px;
				--wall-perspective: 400px;
				--wall-ry: 17deg;
				--wall-width: 600%;
			}
		} */


/* Infinity Wall */

.infinity-wall {
    --wall-height: 650px;
    --wall-perspective: 780px;
    --wall-height-image: 900px;
    --wall-image-ratio: 4.32;
    /* Aumentado para cobrir a folga gerada pela rotação Y sem deixar faltar imagem */
    --wall-width: 800%;
    --wall-rx: 3deg;
    --wall-ry: 20deg;
    --wall-speed: 18s;
    --wall-fade-near: 8%;
    --wall-fade-far: 26%;
    --wall-tile: calc(var(--wall-height-image) * 0.6 * var(--wall-image-ratio));

    position: relative;
    width: 100%;
    max-width: 1920px;
    height: var(--wall-height);
    margin: 0 auto;
    overflow: hidden;
    background: #000;
    perspective: var(--wall-perspective);
    perspective-origin: 50% 50%;
}

.infinity-wall__pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: var(--wall-width);
    height: var(--wall-height-image);
    /* 'left center' garante que o ciclo inicie colado no ponto zero */
    background: url('/wp-content/uploads/2026/08/rodape-site_v5.webp')
        repeat-x
        left center / auto 60%;
    transform-origin: 50% 50%;
    transform:
        translate(-50%, -50%)
        rotateX(var(--wall-rx))
        rotateY(var(--wall-ry));
    animation: infinity-wall-scroll var(--wall-speed) linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    pointer-events: none;
}

/* Névoa de profundidade: dissolve o lado que recua */
.infinity-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            #000 0%,
            rgba(0, 0, 0, 0) var(--wall-fade-near),
            rgba(0, 0, 0, 0) calc(100% - var(--wall-fade-far)),
            rgba(0, 0, 0, 0.9) calc(100% - 4%),
            #000 100%),
        linear-gradient(180deg,
            #000 0%,
            rgba(0, 0, 0, 0) 15%,
            rgba(0, 0, 0, 0) 85%,
            #000 100%);
}

@keyframes infinity-wall-scroll {
    from {
        transform:
            translate(-50%, -50%)
            rotateX(var(--wall-rx))
            rotateY(var(--wall-ry))
            translate3d(0, 0, 0);
    }
    to {
        transform:
            translate(-50%, -50%)
            rotateX(var(--wall-rx))
            rotateY(var(--wall-ry))
            translate3d(calc(var(--wall-tile) * -1), 0, 0);
    }
}

/* TABLET */
@media (max-width: 1024px) {
    .infinity-wall {
        --wall-height: 520px;
        --wall-height-image: 720px;
        --wall-perspective: 640px;
        --wall-ry: 24deg;
        --wall-fade-far: 22%;
        --wall-width: 850%;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .infinity-wall {
        --wall-height: 420px;
        --wall-height-image: 560px;
        --wall-perspective: 500px;
        --wall-ry: 20deg;
        --wall-width: 900%;
        --wall-fade-far: 18%;
    }
}

/* MOBILE PEQUENO */
@media (max-width: 480px) {
    .infinity-wall {
        --wall-height: 450px;
        --wall-height-image: 420px;
        --wall-perspective: 400px;
        --wall-ry: 17deg;
        --wall-width: 1000%;
    }
}

/* Bubbles */
.bubble-container{
		position: relative;	
		
		height: 100px;		
		z-index: 1;	
	    
			background-color: #000;
			padding-top: 180px;
			display: block;
	}

  .bubbles {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: 1rem;	  
	  filter: url("#blob");  

	  height: 100%;
	}

 .bubble {
  position: absolute;
  left: var(--position, 50%);
  background:#ff6a00;
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}

@-webkit-keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}
@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}

/* ==========================================================================
   Video Hero Section
   ========================================================================== */

.video-hero-desc{
	font-size: clamp(1rem, 3vw, 1.25rem) !important;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 500;
}

.video-hero-section {
	margin-top: 100px;
}

.video-hero-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 60px;
	align-items: center;
}

/* Sidebar */
.video-hero-sidebar-title {
	font-size: 0.8rem;
	letter-spacing: 2px;
	border-bottom: 1px solid rgba(255,106,0,0.3);
	padding-bottom: 8px;
	margin-bottom: 24px;
}
.video-hero-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.video-hero-list li {
	display: flex;
	gap: 16px;
	align-items: center;
}

.video-hero-list .icon {
	flex-shrink: 0;
	margin-top: 4px;
}

.video-hero-list h2,
.video-hero-list h5 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-orange);
}

/* Player Wrapper */
.video-hero-player-wrapper {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255,106,0,0.4);
	aspect-ratio: 16/9;
	display: flex;
}
.video-hero-player-wrapper .custom-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay & Big Play Button */
.video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.2);
	transition: opacity 0.3s;
	pointer-events: none;
}
.video-hero-player-wrapper.is-playing .video-overlay {
	opacity: 0;
}
.play-btn-huge {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255,106,0,0.2);
	border: 2px solid #ff6a00;
	color: #ff6a00;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 0.2s, background 0.2s;
	backdrop-filter: blur(4px);
}
.play-btn-huge:hover {
	transform: scale(1.1);
	background: rgba(255,106,0,0.4);
}

/* Bottom Controls */
.video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 24px;
	background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	display: flex;
	align-items: center;
	gap: 16px;
	opacity: 0;
	transition: opacity 0.3s;
}
.video-hero-player-wrapper:hover .video-controls,
.video-hero-player-wrapper.is-paused .video-controls {
	opacity: 1;
}

.ctrl-btn {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s;
}
.ctrl-btn:hover {
	color: #ff6a00;
}

.time-display {
	font-size: 0.85rem;
	color: #ccc;
	font-variant-numeric: tabular-nums;
	min-width: 85px;
}

.progress-bar-container {
	flex-grow: 1;
	height: 24px;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
}
.progress-bar-bg {
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,0.2);
	border-radius: 2px;
	position: absolute;
}
.progress-bar-fill {
	width: 0%;
	height: 4px;
	background: #ff6a00;
	border-radius: 2px;
	position: absolute;
}
.progress-bar-thumb {
	width: 12px;
	height: 12px;
	background: #ff6a00;
	border-radius: 50%;
	position: absolute;
	left: 0%;
	transform: translateX(-50%);
	box-shadow: 0 0 8px #ff6a00;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.video-hero-grid {
		grid-template-columns: 1fr;
	}
	.video-hero-sidebar {
		order: 2;
	}
	.video-hero-player-wrapper {
		order: 1;
	}
}

@media (max-width: 480px) {
	
	.video-hero-player-wrapper{
		aspect-ratio: 3/4 !important;
	}
	
	.video-controls {
		padding: 12px;
		gap: 8px;
	}
	.time-display {
		font-size: 0.75rem;
		min-width: 75px;
	}
	.play-btn-huge {
		width: 60px;
		height: 60px;
	}
}

/* ==========================================================================
   New Footer Layout
   ========================================================================== */

.footer-new-layout {
	background-color: var(--orange, #ff6a00);
	color: #000;
	padding: 80px 40px 40px;
	font-family: inherit;
}

.footer-new-container {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* Top Section */
.footer-new-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 40px;
}

.footer-new-headline {
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-weight: 900;
	line-height: 0.85;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.footer-new-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 24px;
}

.footer-btn-black {
	display: inline-block;
	background-color: #000;
	color: var(--orange, #ff6a00);
	padding: 16px 32px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 2px;
	transition: background-color 0.3s, color 0.3s;
}

.footer-btn-black:hover {
	background-color: #fff;
	color: #000;
}

.footer-new-contacts {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.8;
}

.footer-new-contacts a {
	color: #000;
	text-decoration: none;
}

/* Middle Section */
.footer-new-middle {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 40px;
}

.footer-col-title {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.footer-col-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-col-list a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 1px;
	transition: color 0.2s;
	text-transform: uppercase;
	
	position: relative;
}

.footer-col-list a:hover {
	color: var(--text-white);
}

/* Bottom Section */
.footer-new-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 40px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.6);
}

.footer-slogan,
.footer-copyright{
	color: #000000 !important;
}

@media (max-width: 1024px) {
	.footer-new-middle {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.footer-new-top {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-new-action {
		align-items: flex-start;
		text-align: left;
	}
	.footer-new-middle {
		grid-template-columns: 1fr;
	}
	.footer-new-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}


/* Icons Ajuste Size */

.video-hero-list .icon svg,
.video-hero-list .icon img{
	margin-right: 10px;
	min-height: 55px;
	min-width: 55px;
}

.problem-card__icon svg,
.problem-card__icon img{
	min-height: 80px;
	min-width: 80px;
}



.solution-icon svg,
.solution-icon img{
	min-height: 55px;
	min-width: 55px;
}

.tech-icon svg,
.tech-icon img,
.impact-icon svg,
.impact-icon img{
	min-height: 65px;
	min-width: 65px;
}

.experience-grid .stat-item svg,
.experience-grid .stat-item img{
	margin-right: 5px;
	min-height: 55px;
	min-width: 55px;
}