#base #list .thumb {
	-webkit-filter: contrast(100%);
	-moz-filter: contrast(100%); 
	-o-filter: contrast(100%); 
	filter: contrast(100%); 
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
#base #list .thumb:hover {
	-webkit-filter: contrast(150%);
	-moz-filter: contrast(150%); 
	-o-filter: contrast(150%); 
	filter: contrast(150%); 
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	transform: scale(1.04);	
}	
		
#base #list .card {
    min-width: 0;
    margin: 20px 0px;
    width: 100%;   
	background-image: linear-gradient(to right, #005572 , #04779e);
    color: #FFF;
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
    border: none;
    padding: 0;
	border-radius: 0;
}

#base #list .card .card-img-container .card-img {
  background-size: cover;
  background-position: top center;
  display: block;
  height: 175px;
	background-color: #FFF;
}

#base #list .card .card-img {
  height: 150px;
}

#base #list .card .card-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#base #list .card .card-content {
  padding: 20px 20px 20px;
  text-align: center;
}

#base #list .card .card-data {
	color: #bbd5ca;
	font-family: 'Fira Sans', sans-serif;
	font-size: 13px;
}

#base #list .card .card-content h2 {
	font-family: 'Fira Sans', sans-serif;
  	margin-top: 10px;
  	margin-bottom: 5px;
	font-weight: 500;
  	font-size: 16px;
}

#base #list .card h2 a {
  color: #FFF;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

#base #list .card:hover h2 a {
  color: #FFF;
}
	
#base #list .card:hover h2 a:hover {
  color: #c2d9cf;
}
	

#base #list .card .ods {
  color: #FFF;
}

#base #list .card .ods {
	width: 150px;
  	display: inline-block;
	margin: 10px 0 0 5px;
	float: left;
  	padding: 3px 8px;
  	color: #FFF;
  	-webkit-transition: .3s ease all;
  	transition: .3s ease all;
}	

#base #list input[type=text] {
	 display: block;
	 margin: 0 auto;
	 padding: 10px;
	 background-image: url("../assets/img/icone-busca2.png");
	 background-repeat: no-repeat;
	 background-position: right;
	 border: 3px solid #005572;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	 color: #005572;
	 width: 250px;
	 font-weight: 400;
	-webkit-transition: width 0.15s ease-in-out;
	 transition: width 0.15s ease-in-out;
}
	
#base #list input ::-webkit-input-placeholder {
	color: #c2c2c2;
}

#base #list input ::-moz-placeholder {
	color: #c2c2c2;
}

#base #list input :-ms-input-placeholder {
	color: #c2c2c2;
}

#base #list input :-moz-placeholder { 
	color: #c2c2c2;
}
	
#base #list input[type=text]:focus {
	width: 400px;
	outline: none;
}
	
#base #list {
	list-style-type: none;
}		
		
@media only screen
and (max-width : 1024px) {	
#base #list input[type=text]:focus {
	width: 90%;
}
}

/* MOADAL PADRÃO SUST */
.sust_modal .modal-content p {
	font-weight: 400 !important;
	font-size: 15px !important;
	color: #6a6a6a  !important;
}

.sust_modal .modal-header {
	padding: 10px 10px !important;
}

.sust_modal .modal-title {
	font-weight: 600 !important;
	text-transform: none !important;
}

.sust_modal .modal-body {
	padding: 20px !important;
}

/* MODAL - contOC1 */
.sust_modal .numero-principal {
	font-size: 40px;
	font-weight: 700;
	color: #2d9a3a;
	display: inline-block;
	margin: 0 10px;
	transition: all 0.3s ease;
	position: relative;
}

.sust_modal .unidade-medida {
	font-size: 18px;
	font-weight: 700;
	color: #495057;
}

.sust_modal .ano-destaque {
	color: #FFF;
	padding: 6px 16px;
	border-radius: 25px;
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
	margin: 0 10px;
}

.sust_modal .icone-co2 {
	font-size: 20px;
	color: #2d9a3a;
	margin-right: 10px;
	vertical-align: middle;
}

.sust_modal .destaque-box {
	background: linear-gradient(135deg, #e8f5e8, #f0fff0);
	border-left: 5px solid #2d9a3a;
	padding: 20px;
	margin: 20px 0;
	border-radius: 0 15px 15px 0;
	position: relative;
}

.sust_modal .texto-enfase {
	font-weight: 700;
}

/* MODAL - contOC2 */
.sust_modal .thumb-card {
	border: none;
	background: transparent;
	padding: 0;
	overflow: hidden;
	border-radius: .5rem;
}

.sust_modal .thumb-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: .5rem;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.sust_modal .thumb-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.sust_modal .thumb-card:hover .thumb-wrap img {
	transform: scale(1.15);
}

.sust_modal .card-body {
	display: none;
}

/* MODAL - contOC3 */
.sust_modal .residuo-card {
	border: none;
	border-radius: 20px;
	height: 100%;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.sust_modal .residuo-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.03);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.sust_modal .residuo-card:hover::before {
	opacity: 1;
}

.sust_modal .residuo-card .card-icon {
	font-size: 2.5rem;
	margin-bottom: 20px;
	transition: all 0.4s ease;
	position: relative;
	z-index: 2;
	color: #343a40;
}

.sust_modal .residuo-card:hover .card-icon {
	transform: scale(1.15) rotate(5deg);
}

.sust_modal .residuo-card .card-body {
	padding: 30px 25px;
	text-align: center;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	min-height: 200px;
	color: #6a6a6a;
}

.sust_modal .residuo-card .card-title {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 10px;
	color: #6a6a6a;
	text-shadow: none;
	transition: all 0.3s ease;
}

.sust_modal .residuo-card  p {
	font-size: 12px !important;
	color: #495057;
	font-weight: 500 !important;
}

.sust_modal .reciclavel { background: linear-gradient(135deg, #e6ffe6, #f0fff0); }
.sust_modal .reciclavel .card-icon { color: #28a745; }
.sust_modal .organico { background: linear-gradient(135deg, #f0fff0, #f8fff8); }
.sust_modal .organico .card-icon { color: #28a745; }
.sust_modal .comum { background: linear-gradient(135deg, #f8f9fa, #e9ecef); }
.sust_modal .comum .card-icon { color: #6c757d; }
.sust_modal .saude { background: linear-gradient(135deg, #ffe6e6, #fff0f0); }
.sust_modal .saude .card-icon { color: #dc3545; }
.sust_modal .metalico { background: linear-gradient(135deg, #e9f2f5, #f0f7f9); }
.sust_modal .metalico .card-icon { color: #6c757d; }
.sust_modal .oleo { background: linear-gradient(135deg, #fff8e6, #fffaf0); }
.sust_modal .oleo .card-icon { color: #ffc107; }
.sust_modal .quimico { background: linear-gradient(135deg, #f0e6f5, #f8f0fa); }
.sust_modal .quimico .card-icon { color: #6f42c1; }
.sust_modal .eletronico { background: linear-gradient(135deg, #e6f2ff, #f0f8ff); }
.sust_modal .eletronico .card-icon { color: #007bff; }
.sust_modal .pilhas { background: linear-gradient(135deg, #fff0e6, #fff8f0); }
.sust_modal .pilhas .card-icon { color: #fd7e14; }
.sust_modal .lampadas { background: linear-gradient(135deg, #fffde6, #fffff0); }
.sust_modal .lampadas .card-icon { color: #ffc107; }
.sust_modal .madeira { background: linear-gradient(135deg, #f5f0e6, #faf8f0); }
.sust_modal .madeira .card-icon { color: #8b4513; }

.sust_modal .residuo-card {
	animation: slideInUp 0.6s ease-out forwards;
	opacity: 0;
	transform: translateY(30px);
}

.sust_modal .residuo-card:nth-child(1) { animation-delay: 0.1s; }
.sust_modal .residuo-card:nth-child(2) { animation-delay: 0.2s; }
.sust_modal .residuo-card:nth-child(3) { animation-delay: 0.3s; }
.sust_modal .residuo-card:nth-child(4) { animation-delay: 0.4s; }
.sust_modal .residuo-card:nth-child(5) { animation-delay: 0.5s; }
.sust_modal .residuo-card:nth-child(6) { animation-delay: 0.6s; }
.sust_modal .residuo-card:nth-child(7) { animation-delay: 0.7s; }
.sust_modal .residuo-card:nth-child(8) { animation-delay: 0.8s; }
.sust_modal .residuo-card:nth-child(9) { animation-delay: 0.9s; }
.sust_modal .residuo-card:nth-child(10) { animation-delay: 1.0s; }
.sust_modal .residuo-card:nth-child(11) { animation-delay: 1.1s; }

@keyframes slideInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* MODAL - CI1 */
.sust_modal .ano-destaque2 {
	color: #FFF;
	padding: 8px 20px;
	border-radius: 25px;
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
	margin: 0 10px;
	transition: all 0.3s ease;
}

.sust_modal .icone-dados2 {
	font-size: 1.5rem;
	color: #29b8bd;
	margin-right: 10px;
	vertical-align: middle;
}

.sust_modal .destaque-box2 {
	background: linear-gradient(135deg, #e8f7f8, #f0fafb);
	border-left: 5px solid #29b8bd;
	padding: 25px;
	margin: 25px 0;
	border-radius: 0 15px 15px 0;
	position: relative;
}

.sust_modal .destaque-box-secundario2 {
	background-color: #FFF;
	border-left: 1px solid #29b8bd;
	padding: 20px;
	margin: 20px 0;
	border-radius: 0 12px 12px 0;
	text-align: left;
}

.sust_modal .categoria-funcionario {
	color: #FFF;
	padding: 4px 8px;
	border-radius: 20px;
	font-weight: 400;
	display: inline-block;
	margin: 2px 5px;
	font-size: 14px;
}

.sust_modal .percentual-destaque2 {
	font-size: 40px;
	font-weight: 700;
	color: #29b8bd;
	margin-right: 10px;
	transition: all 0.3s ease;
}

.sust_modal .linha-dados {
	display: flex;
	align-items: center;
	text-align: left;
	margin: 15px 0;
	flex-wrap: wrap;
}

/* MODAL - CE1 */
.sust_modal .valor-principal {
	font-size: 45px;
	font-weight: 900;
	color: #0154a4;
	margin: 0;
	display: block;
	transition: all 0.3s ease;
	position: relative;
}

.sust_modal .valor-principal:hover {
	transform: scale(1.05);
	color: #004486;
}

.sust_modal .simbolo-mais {
	font-size: 28px;
	color: #004486;
	font-weight: bold;
	margin-right: 0;
	vertical-align: top;
	display: block;
	margin-bottom: 10px;
}

.sust_modal .moeda {
	font-size: 36px;
	color: #495057;
	font-weight: 700;
	display: inline-block;
	vertical-align: middle;
}

.sust_modal .destaque-principal {
	font-size: 18px !important;
	color: #495057 !important;
	font-weight: 700 !important;
}

.sust_modal .linha-decorativa {
	width: 120px;
	height: 4px;
	background: linear-gradient(45deg, #0154a4, #004486);
	margin: 20px auto;
	border-radius: 2px;
	position: relative;
}

.sust_modal .linha-decorativa::before,
.sust_modal .linha-decorativa::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #0154a4;
	border-radius: 50%;
	top: -2px;
}

.sust_modal .linha-decorativa::before {
	left: -15px;
}

.sust_modal .linha-decorativa::after {
	right: -15px;
}

/* MODAL - P1 */
.sust_modal .simbolo-mais2 {
	font-size: 28px;
	color: #8e2b81;
	font-weight: bold;
	margin-right: 0;
	vertical-align: top;
	display: block;
	margin-bottom: 10px;
}

.sust_modal .valor-principal2 {
	font-size: 50px;
	font-weight: 900;
	color: #a64499;
	margin: 0;
	display: block;
	transition: all 0.3s ease;
	position: relative;
}

.sust_modal .valor-principal2:hover {
	transform: scale(1.05);
	color: #8e2b81;
}

.sust_modal .linha-decorativa2 {
	width: 120px;
	height: 4px;
	background: linear-gradient(135deg, #a64499, #8e2b81); 
	margin: 20px auto;
	border-radius: 2px;
	position: relative;
}

.sust_modal .linha-decorativa2::before,
.sust_modal .linha-decorativa2::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #8e2b81;
	border-radius: 50%;
	top: -2px;
}

.sust_modal .linha-decorativa2::before {
	left: -15px;
}

.sust_modal .linha-decorativa2::after {
	right: -15px;
}

/* MODAL - contGG1 */
.sust_modal .politica-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 30px;
}

.sust_modal h3 {
	font-size: 22px !important;
	color: #4f4f4f !important;
	font-weight: 600 !important;
}
        
.sust_modal .politica-item {
	background: #FFF;
	border-radius: 15px;
	padding: 25px;
	border: 1px solid #dee2e6;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 20px;
}
        
.sust_modal .politica-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, #cd9c11, #bf8e04);
}
        
.sust_modal .politica-item:hover {
	border-color: #bf8e04;
}
        
.sust_modal .politica-icone {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 1.5rem;
	flex-shrink: 0;
}
        
.sust_modal .politica-texto {
	font-size: 14px;
	font-family: 'Fira Sans', sans-serif;            
	color: #495057;
	margin: 0;
	flex: 1;
}
        
       


/* Container principal */
.arquetipos .btn-sm {
	font-size: 12px;
}

.arquetipos .btn-light {
	border: 0;
	background-color: #FFF;
	color: #6a6a6a;
}


.arquetipos .btn-light:hover {
	border: 0;
}


.container-fluid {
    padding: 0;

}

.row {
    margin: 0;
}

/* Coluna esquerda - Container dos hexágonos */
/* Coluna esquerda - Container dos hexágonos */
.hexagon-container {
    position: relative;
    padding: 20px;
    transition: transform 0.3s ease;
    width: 100%;
}

/* ================================================================== */
/* NOVA REGRA PARA DESKTOP (STICKY) */
/* ================================================================== */
/* Aplica o efeito "sticky" apenas em telas maiores que 768px */
@media (min-width: 769px) {
    .hexagon-container {
        position: -webkit-sticky; /* Para compatibilidade com Safari */
        position: sticky;
        top: 50px; /* Distância do topo onde o elemento vai "grudar". Ajuste se necessário. */
        
        /* É uma boa prática definir uma altura para o container sticky, 
           e alinhá-lo ao topo do seu container pai (se for flex). */
    }
}
/* ================================================================== */
/* FIM DA NOVA REGRA */
/* ================================================================== */


/* Grid dos hexágonos */
.hexagon-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    animation: rotateGrid 30s linear infinite;
    transform-origin: center;
}

/* Animação de rotação do grid */
@keyframes rotateGrid {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hexagon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.hexagon-row.middle-row {
    gap: 20px;
}

/* ================================================================== */
/* CORREÇÃO APLICADA AQUI */
/* ================================================================== */
/* Classe para pausar a rotação do grid e a contra-rotação das imagens */
.hexagon-grid.paused {
    animation-play-state: paused;
}

.hexagon-grid.paused .hexagon-image {
    animation-play-state: paused; /* Pausa a contra-rotação da imagem */
}

.hexagon-grid.paused .hexagon-item {
    animation-play-state: paused; /* Pausa a animação de flutuação */
}
/* ================================================================== */
/* FIM DA CORREÇÃO */
/* ================================================================== */

/* Itens hexagonais */
.hexagon-item {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 6s ease-in-out infinite;
}

/* Animação de flutuação suave para cada hexágono */
.hexagon-item:nth-child(1) { animation-delay: 0s; }
.hexagon-item:nth-child(2) { animation-delay: -1s; }
.hexagon-item:nth-child(3) { animation-delay: -2s; }

.hexagon-row.middle-row .hexagon-item:nth-child(1) { animation-delay: -3s; }
.hexagon-row.middle-row .hexagon-item:nth-child(3) { animation-delay: -4s; }

.hexagon-row.bottom-row .hexagon-item:nth-child(1) { animation-delay: -5s; }
.hexagon-row.bottom-row .hexagon-item:nth-child(2) { animation-delay: -1.5s; }

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-8px) rotate(1deg);
    }
    66% {
        transform: translateY(-4px) rotate(-1deg);
    }
}

.hexagon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;

    opacity: 1 !important;
    visibility: visible !important;
    animation: counterRotate 30s linear infinite;
}

/* Animação de contra-rotação para manter as imagens dos hexágonos na posição correta */
@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Efeitos de hover e estado ativo nos hexágonos */
.hexagon-item.hover-effect {
    transform: scale(1.1);
    z-index: 10;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); /* Adicionando sombra */
}

.hexagon-item.active {
    animation: float-active 6s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); /* Mantendo a sombra para o estado ativo */
}

.hexagon-item:active {
    transform: scale(1.1);
}

.hexagon-item.active .hexagon-image {

    opacity: 1 !important;
    visibility: visible !important;
}



@keyframes pulse {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes float-active {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1.1);
    }
    33% {
        transform: translateY(-8px) rotate(1deg) scale(1.1);
    }
    66% {
        transform: translateY(-4px) rotate(-1deg) scale(1.1);
    }
}

/* Logo central */
.central-logo {
    width: 155px;
    height: 155px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.central-logo::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.central-logo:hover {
    transform: rotate(5deg) scale(1.05);
}

.central-logo:hover::before {
    animation: shine 1.5s ease-in-out;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.logo-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.ods-icon {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ods-bar {
    height: 3px;
    width: 40px;
    border-radius: 2px;
}

/* Coluna direita - Área de conteúdo */
.content-area {
    background: white;

    position: relative;
    overflow: hidden;
}

.content-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

/* Conteúdo de boas-vindas */
.welcome-content {
    padding: 40px;
    animation: fadeIn 1s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.welcome-content.hidden {
    display: none !important;
}

.welcome-icon {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Conteúdo dinâmico */
.dynamic-content {
    padding: 30px;
    animation: slideInRight 0.5s ease-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Borda colorida do cabeçalho */
.color-border {
    height: 6px;
    width: 100%;
    border-radius: 3px;
    transition: all 0.3s ease;

}

/* Título do conteúdo */
.content-title {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 700;
    color: #005474;

    font-size: 2rem;
    margin-bottom: 20px;
    position: relative;
    animation: slideInDown 0.6s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, #aaaaaa, #c7c7c7);
}

/* Descrição do conteúdo */
.content-description {
    font-size: 15px !important;
	margin-bottom: 15px !important;
	font-weight: 400 !important;
    color: #6a6a6a !important;
    animation: fadeInUp 0.7s ease-out;
	line-height: 25px !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Itens de conteúdo */
.content-items h4 {
	font-family: 'Fira Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease-out;
}

.content-items ul {
    animation: fadeInUp 0.9s ease-out;
}

.content-items li {
    padding: 15px 5px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start; /* ícone e texto no topo */
}

.content-items li:hover {
    background: rgba(223, 233, 237, 0.3);
    padding-left: 10px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(0, 123, 255, 0.1);
}

.content-items li:last-child {
    border-bottom: none;
}

.content-items li i {
    margin-right: 15px;
    font-size: 26px;
    transition: all 0.3s ease;
    min-width: 25px;
	display: flex;
    align-items: flex-start; /* <- topo em vez de central */
}

.content-items li:hover i {
    transform: scale(1.1);
}

.content-items li .item-text {
	font-family: 'Fira Sans', sans-serif;
	flex: 1;
	font-size: 16px;
    font-weight: 500;
    opacity: 0.95;
}

.content-items li .item-description {
    color: #8a8989;
	font-size: 14px;
    margin-top: 10px;
	margin-left: 10px;
}

/* Cores específicas para cada seção */
.ensino-border { background: linear-gradient(135deg, #6b439b, #573285) !important; }
.pesquisa-border { background: linear-gradient(135deg, #a64499, #8e2b81) !important; }
.comunidade-externa-border { background: linear-gradient(135deg, #0154a4, #004486) !important; }
.gestao-governanca-border { background: linear-gradient(135deg, #dfab18, #f8c32d) !important; }
.comunidade-interna-border { background: linear-gradient(135deg, #29b8bd, #3cd4d9) !important; }
.operacoes-campus-border { background: linear-gradient(135deg, #46b654, #2d9a3a) !important; }

.ensino-nome { color: #6b439b; }
.pesquisa-nome { color: #a64499; }
.comunidade-externa-nome { color: #0154a4; }
.gestao-governanca-nome { color: #f8c32d; }
.gestao-governanca-nome2 { color: #646464; }

.comunidade-interna-nome { color: #15979c; }
.operacoes-campus-nome { color: #46b654; }


/* Responsividade */
@media (max-width: 768px) {
    .container-fluid {
        padding: 0;
    }
    
    .row {
        flex-direction: column;
    }
    
    .col-lg-6, .col-md-6 {
        width: 100%;
        max-width: 100%;
    }
    
    .hexagon-container {
        padding: 10px;
        max-width: 400px;
        margin-bottom: 20px;
        
        /* Garante que o 'sticky' não se aplique em mobile, caso haja sobreposição de regras. */
        position: relative; 
        height: auto;
    }
    
    .hexagon-item {
        width: 80px;
        height: 80px;
    }
    
    .hexagon-row {
        gap: 15px;
    }
    
    .hexagon-row.middle-row {
        gap: 10px;
    }
    
    .central-logo {
        width: 100px;
        height: 100px;
    }
    
  .content-area {
        /* Garante que a área de conteúdo tenha uma altura mínima para exibir o conteúdo */
        min-height: auto;
        padding-bottom: 0; /* Adiciona um respiro na parte inferior */
    }
	
	
    
      .welcome-content {
        /* Remove o posicionamento absoluto para que o conteúdo volte ao fluxo normal do documento */
        position: relative;
        /* Garante que o conteúdo não fique escondido */
        display: flex !important;
        opacity: 1;
        animation: none; /* Remove a animação de fade-in que pode interferir */
    }

    .welcome-content.hidden {
        /* Garante que o conteúdo seja ocultado corretamente quando necessário */
        display: none !important;
    }
    
    .dynamic-content {
        padding: 20px;
    }
    
    .content-title {
        font-size: 1.8rem;
    }
    
    .logo-title {
        font-size: 18px;
    }
}   
    .logo-subtitle {
        font-size: 12px;
    }
    
    .content-title {
        font-size: 1.8rem;
    }
    
    .dynamic-content {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .row {
        flex-direction: column;
    }
    
    .col-lg-6, .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    .hexagon-container {
       padding: 10px;
        max-width: 300px;
        margin-bottom: 20px;
        
        /* Garante que o 'sticky' não se aplique em mobile, caso haja sobreposição de regras. */
        position: relative; 
        height: auto;
    }
    
    .hexagon-item {
        width: 60px;
        height: 60px;
    }
    
    .hexagon-row {
        gap: 10px;
    }
    
    .central-logo {
        width: 80px;
        height: 80px;
    }
    
    .logo-title {
        font-size: 16px;
    }
    
    .logo-subtitle {
        font-size: 10px;
    }
    
    .content-title {
        font-size: 1.8rem;
    }
    
    .dynamic-content {
        padding: 20px;
    }
}



.video-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #FFF !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.video-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
	color: #FFF;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.video-link:hover::before {
    left: 100%;
}

.video-link:hover {
	color: #FFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #ff5252, #d63031);
}

.video-link:active {
    transform: translateY(0);
	color: #FFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Ícone de play */
.video-link::after {
    content: '▶';
    font-size: 12px;
    margin-left: 2px;
}


.cont-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #747575, #888a8a);
    color: #FFF !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.cont-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
	color: #FFF !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.cont-link:hover::before {
    left: 100%;
}

.cont-link:hover {
	color: #FFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #888a8a, #747575);
}

.cont-link:active {
    transform: translateY(0);
	color: #FFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}






.sust_cont .navbar-brand {
	font-size: 13px !important;
	font-weight: 600;
	color: #027ca5;
}
	
.sust_cont .navbar-nav .nav-item {
	font-size: 12px;
	line-height: 15px;
	padding: 2px;
}
	
.sust_cont .navbar-nav .nav-link {
    display: block;
    padding: 5px;
}	
	
.sust_cont .ods-listra {
	height: 60px;
	display: flex;
	position: relative;
	overflow: hidden;
}
        
.sust_cont .ods-cores {
	flex: 1;
	height: 100%;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}
        
.sust_cont .ods-cores:hover {
	z-index: 10;
}
        
.sust_cont .ods-logo-cont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	width: 80px;
	height: 80px;
	background: #FFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
        
.sust_cont .ods-logo {
	width: 60px;
	height: 60px;
	animation: rotate 10s linear infinite;
}
        
@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
        
.sust_cont .menu-cards {
	margin-top: 60px;
}
        
.sust_cont .menu-card {
	background: #FFF;
	border-radius: 15px;
	padding: 30px 20px;
	text-align: center;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: all 0.3s ease;
	border: none;
	height: 100%;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
        
.sust_cont .menu-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0386b3, #005572);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
        
.sust_cont .menu-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.10);
}
        
.sust_cont .menu-card:hover::before {
	transform: scaleX(1);
}
        
.sust_cont .menu-card-i {
	font-size: 2.5rem;
	color: #005572;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}
        
.sust_cont .menu-card:hover .menu-card-i {
	color: #0386b3;
	transform: scale(1.1);
}
        
.sust_cont .menu-card-titulo {
	font-size: 1rem;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 15px;
	line-height: 1.4;
}
        
.sust_cont .badge-pdf {
	background: linear-gradient(45deg, #e74c3c, #c0392b);
	color: #FFF;
	font-size: 0.7rem;
	padding: 4px 8px;
	border-radius: 12px;
	margin-left: 8px;
}
          
.sust_cont .ods-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
}
	
.sust_cont .thumb {
	 filter: grayscale(0%);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
.sust_cont .thumb:hover {
	 filter: grayscale(100%);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	transform: scale(1.04);	
}		
	
#base .strong {
	font-weight: 600;
}	
	
#base .card {
	border: 0 !important;
}	
	
#base .card-body {
	margin: 0;
	padding: 5px 0 35px 0;
}	
	
#base .card-title {
	font-weight: 500 !important;
	font-family: 'Fira Sans', sans-serif;
	color:#21a7d0; !important;
	text-align: center;
}
	
#base .card-text	{
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	line-height:normal!important;
	margin: 10px 0 15px 0 !important;
	text-align: center;
}
	
#base .text-center {
	padding: 0 !important;
}
	
		
#base h1 {
	text-align: center;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 700;
	font-size: 34px;
	margin: 20px 0 15px 0;
	color: #016486;
}
	
#base .float-left {
	float: left;
	margin-right: 20px !important;
}
	
#base .float-right {
	float: right;
	margin-left: 20px !important;
}
		
#base .foto1 {
	margin-right: 30px;
}
	
#base .foto2 {
	margin-left: 30px;
}
	
#base .list-group-flush	{
	font-family: 'Fira Sans', sans-serif;
	color: #404040;
	font-weight: 400;
}
	
@media only screen
and (max-width : 1024px) {	
#base h1 {
	font-size: 26px;
}	
	
#base .float-left {
	float:none !important;
	display: block !important;
	margin: 15px auto !important;
	margin-right: inherit;
}
	
#base .float-right {
	float:none !important;
	display: block !important;
	margin: 15px auto !important;
	margin-left: inherit;
}	
	
}